Display only two images on each row - html

Question

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?

Answer 1

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>

Answer 2

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%

Answer 3

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.

Answer 4

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;
}

Answer 5

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;
}

Answer 6

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>