0

I have 4 images and want them to be displayed 2 on each row. Each of them has a width:50% and also a float:left.

HTML

<section class="opportunity">
   <div class="main">
       <img src="phone.jpg" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>       
    <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="clearfix"></div>
</section>

CSS: 

.clearfix{
  clear: both;
 }
section{
  text-align: center;
}
.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 margin : 50px auto;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
}
.paragraph{
 -webkit-transform: translateY(-300%);
 border: 5px solid grey;
 background-color: grey;
 opacity: 0.5;
}
.main:hover .content,
   .main:active .content{
   -webkit-transform: translateY(-340px);
   -webkit-transition: -webkit-transform 700ms;
}
.content{
  width: 306px;
  height: 306px;
  background: rgba(51, 102, 255, 0.5);    
 }
 img{
   height:inherit;
   width:inherit;
   -webkit-transition: -webkit-transform 5000ms;
 }
 button{
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: black;
  border: 0;
  cursor: pointer;
  color: white;
  font: 16px tahoma;    
 }
 button:hover
 {
  opacity: 0.5;
 }

The problem is that all of the image are displayed within the same row. The width:50% does not seem to applied. How can I display the images two by two instead of having them all displayed on the same line?

cch
  • 3,336
  • 8
  • 33
  • 61
Elton Sousa
  • 421
  • 3
  • 10

6 Answers6

2

You added width twice, with percentage and pixels, you should remove that: 

.clearfix{
  clear: both;
 }
section{
  text-align: center;
}
.some-container {
   float:left;
 width:50%;
 position: relative;
}
.main{

 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 margin : 50px auto;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
}
.paragraph{
 -webkit-transform: translateY(-300%);
 border: 5px solid grey;
 background-color: grey;
 opacity: 0.5;
}
.main:hover .content,
   .main:active .content{
   -webkit-transform: translateY(-340px);
   -webkit-transition: -webkit-transform 700ms;
}
.content{
  width: 306px;
  height: 306px;
  background: rgba(51, 102, 255, 0.5);    
 }
 img{
   height:inherit;
   width:inherit;
   -webkit-transition: -webkit-transform 5000ms;
 }
 button{
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: black;
  border: 0;
  cursor: pointer;
  color: white;
  font: 16px tahoma;    
 }
 button:hover
 {
  opacity: 0.5;
 }
<section class="opportunity">
  <div class="some-container">
   <div class="main">
       <img src="phone.jpg" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
    
    </div>
    </div>
   </div>       
    <div class="some-container">
    <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   </div>
     <div class="some-container">
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>   
   </div>
     <div class="some-container">
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>   
   </div>
   <div class="clearfix"></div>
</section>
Teuta Koraqi
  • 1,898
  • 1
  • 10
  • 28
0

The float cannot work because the elements dont fit into a row. You have set a margin. The complete width of an element is width+margin-left+margin-right. That must be smaller than 50%

Jonas Wilms
  • 132,000
  • 20
  • 149
  • 151
0

Instead of using float everywhere, try using a HTML table, with 2 rows and 2 columns.

<table>
  <tr>
    <td>img1</td>
    <td>img2</td>
  </tr>
  ... etc
</table>

Then set all your table cells to be 50% wide using CSS.

Ephi
  • 346
  • 2
  • 12
  • 1
    Try to avoid using tables ;) – Refilon Jul 11 '16 at 08:59
  • Could you explain why ? :) – Ephi Jul 11 '16 at 09:00
  • Not flexible / hard to style when you're on a mobile phone etc. Also using tables as a lay-out is from the 90's. Now it's nicer and easier to style using DIVs – Refilon Jul 11 '16 at 09:01
  • Is it the same for `display:table` ? – Ephi Jul 11 '16 at 09:03
  • No, display: table is the way to go if you really want / need tables. Because you can change the display with CSS, you can't change the table structure in HTML with CSS. Have to use extra JS that does that, and you dont want that. Read this: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html#answer-84986 – Refilon Jul 11 '16 at 09:05
  • Thanks for the load of information by the way, hope it'll help the OP too – Ephi Jul 11 '16 at 09:08
0

You are using float as well as margin:0 auto replace the main css with the following;

.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 width:306px;
 height:306px;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
 }
Sanjeev Kumar
  • 3,113
  • 5
  • 36
  • 77
0

You have added the width twice remove that 306px and give box sizing border-box to make sure that borders are taking from inside see this fiddle https://jsfiddle.net/pwfucx16/

    <section class="opportunity">
   <div class="main">
       <img src="phone.jpg" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>       
    <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="main">
       <img src="phone.jpg">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="clearfix"></div>
</section>

Style sheet is

.clearfix{
      clear: both;
     }
    section{
      text-align: center;
    }
    .main{
     float:left;

     text-align: center;
     border:10px solid white;
     height:306px;
      width:50%;
     margin : 50px auto;
     box-shadow: 0px 0px 25px black;
     overflow: hidden;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
    }
    .paragraph{
     -webkit-transform: translateY(-300%);
     border: 5px solid grey;
     background-color: grey;
     opacity: 0.5;
    }
    .main:hover .content,
       .main:active .content{
       -webkit-transform: translateY(-340px);
       -webkit-transition: -webkit-transform 700ms;
    }
    .content{
      width: 306px;
      height: 306px;
      background: rgba(51, 102, 255, 0.5);    
     }
     img{
       height:inherit;
       width:inherit;
       -webkit-transition: -webkit-transform 5000ms;
     }
     button{
      width: 100%;
      height: 50px;
      margin-top: 100px;
      background: black;
      border: 0;
      cursor: pointer;
      color: white;
      font: 16px tahoma;    
     }
     button:hover
     {
      opacity: 0.5;
     }
Taj Khan
  • 579
  • 2
  • 7
  • 22
0

Your main problem is the fact that you have two width properties on the CSS rule for .main. You're setting the width to 50% but then overriding it again a few lines later to a value of 306px:

.main{
  float:left;
  width:50%;
  // ...
  width:306px;
  // ...
}

Secondly, the 10px border that you're applying to your .main element will not be taken into account when the 50% width is calculated and so your elements will be 20px (2 x 10px) wider than 50%. To fix this, you'll need to set the box-sizing property value to `border-box':

.main {
    // ...
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

There are a few other kinks to sort out as well but this will solve your requested issue. I'm not sure exactly what you're going for here so when you run into more issues feel free to create another question and link to it here.

Here's a snippet with my proposed fixes to display 2 images in a row:

.clearfix{
  clear: both;
 }
section{
  text-align: center;
}
.main{
 float:left;
 width:50%;
 text-align: center;
 border:10px solid white;
 height:306px;
 margin : 50px auto;
 box-shadow: 0px 0px 25px black;
 overflow: hidden;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
}
.paragraph{
 -webkit-transform: translateY(-300%);
 border: 5px solid grey;
 background-color: grey;
 opacity: 0.5;
}
.main:hover .content,
   .main:active .content{
   -webkit-transform: translateY(-340px);
   -webkit-transition: -webkit-transform 700ms;
}
.content{
  width: 100%;
  height: 306px;
  background: rgba(51, 102, 255, 0.5);    
 }
 img{
   height: inherit;
   width: inherit;
   -webkit-transition: -webkit-transform 5000ms;
 }
 button{
  width: 100%;
  height: 50px;
  margin-top: 100px;
  background: black;
  border: 0;
  cursor: pointer;
  color: white;
  font: 16px tahoma;    
 }
 button:hover
 {
  opacity: 0.5;
 }
<section class="opportunity">
   <div class="main">
       <img src="http://placehold.it/650x350" >
        <div class="paragraph">This wil be centered</div>
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>       
    <div class="main">
       <img src="http://placehold.it/650x350">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>
   <div class="main">
       <img src="http://placehold.it/650x350">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="main">
       <img src="http://placehold.it/650x350">
       <div class="content">
           <button>Nokia 7210 Classic</button>
       </div>
   </div>    
   <div class="clearfix"></div>
</section>
Cobus Esterhuyse
  • 1
  • 1
  • It is actually working. Is there a way I can give spacing between each box? am applying padding but it's not really working. – Elton Sousa Jul 11 '16 at 09:55
  • Indeed it's working. Is there a way I can give a little bit of spacing between the boxes?I tried margin 50px to the bottom,top,left and right on the .hovereffect class.Problem is that when I do it,the boxes display one by one and not two by two any more. – Elton Sousa Jul 11 '16 at 10:02
  • @EltonSousa, `margin` will indeed break the layout because it is added in addition to the 50% width. You will need to add another element (`div`) inside of `.main` and move all of the presentational styling (`border`, `box-shadow`) from `.main` to the new `div`. Now you can add padding to `.main`. Please upvote my answer if it has been helpful! – Cobus Esterhuyse Jul 11 '16 at 10:21
  • .Understood. So how can I overcome this in practice? – Elton Sousa Jul 11 '16 at 10:26
  • 1
    @EltonSousa, see edited response above (posted comment too soon). The new element must of course wrap all of the other content in `.main`. – Cobus Esterhuyse Jul 11 '16 at 10:29