Katie Raynolds Katie Raynolds - 5 months ago 12
CSS Question

My floated elements are being pulled too far to the left

I'm new to CSS, and I've looked for help in the previous forums on this issue. I think I'm doing everything right but my floated elements are being yanked to the left.

The Problem

Here is my code:

div {
display: block;
}

.grid {
width: 660px;
position: relative;
float: left;
padding-bottom: 10px;
clear: left;
}

.home {
text-align: center;
float: left;
width: 33.3333333%;
position: relative;
padding: 25px;
}

.third {
display: inline-block;
position: relative;
float: left;
height: 150px;
width: 150px;
border-radius: 25px;
}

.third img {
float: left;
position: relative;
}


And my html:

<div class="grid">
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
<article class="home">
<article class="third">
<img src="" /></article>
</article>
</div>


Help please!

Answer

I can't comment yet…

Your original code on fiddle

The problem come from padding in .home class.
I have disabled padding:25px; here in .home class, because padding is added to width in CSS:

The modified version (without padding) on fiddle

Now it's not "pulled too far on the left".

What you can do instead, is to add margin:25px; to .third class, like this:

The modified version (with margin) on fiddle

EDIT: A CLEAN REVISITED VERSION:

The HTML code:

  <div class="grid">
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/nemo/350/200/1" />
      </div>
    </article>
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/futurama/350/200/6" />
      </div>
    </article>
    <article class="home">
      <div class="third">
        <img src="http://lorempicsum.com/up/350/200/6" />
      </div>
    </article>
  </div>

The CSS code:

.grid {
  width: 660px;
  position: relative;
  float: left;
  padding-bottom: 10px;
  clear: left;
}

.home {
  text-align: center;
  float: left;
  width: 33.3333333%;
}

.third {
  display:table-cell;
  height: 150px;
  width: 150px;
  padding: 25px;
  border-radius:25px;
  vertical-align:middle;
  background-color:#eee; //added just for test display
}

.third img {
  border:none;
  width: 100%;
  height: auto;
}

The result here on fiddle.

Fiddle result in a screenshot

Images are adaptative, centered vertically and horizontally.
.third class have light grey background color just for testing and displaying the curved borders and the centered images inside it.
I have also replaced in html code, the second <article> tag by a <div> tag, because it is redundant.

Comments