My floated elements are being pulled too far to the left

3 comments

1. 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.

   

   Images are adaptative, centered vertically and horizontally.
   
   The .third class have a 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.

2. Please use the updated code I think it will work.

   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;
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
   }
   .third {
       display:block;
       border-radius: 25px;
   }
   .third img {
       width:100%;
       height:auto;
   }
   

3. Here’s a possible correction of your code to you :

   See this fiddle

   I’ve changed a little the HTML structure like this :

   <section class="home">
     <article class="third">
       <img src="http://lorempicsum.com/futurama/350/200/1" />
     </article>
     <article class="third">
       <img src="http://lorempicsum.com/futurama/350/200/1" />
     </article>
     <article class="third">
       <img src="http://lorempicsum.com/futurama/350/200/1" />
     </article>
   </section>
   

   It’s better for semantic to have section around article and not article around article.

   I’ve simplify the CSS code like this :

   section.home {
     width: 660px;
     position: relative;
     float: left;
     padding-bottom: 10px;
     clear: left;
   }
   
   article.third {
     text-align: center;
     float: left;
     width: 150px;
     position: relative;
     padding: 25px;
     overflow: hidden;    
   }
   
   .third img {
     border-radius: 25px;
     width: 100%;
     position: relative;
   }
   

   If you use fluid width for container, then use fluid width for padding/margin of article.

   In that case, i use fixed width of the container and for padding values.

Comments are closed.