Dylan Dylan - 2 months ago 8
CSS Question

Organizing images in a grid like fashion

I'm trying to organize the images on this web page as two images side by side going down the page with an equal gap to the sides and on top. The format should look like: (image) (image)
and so forth going down the page.
I can't get the images with their descriptions to sit on the right side of the page as they all keep travelling downward. I originally thought that having a leftimg and a rightimg class would work but I couldn't seem to get that to work either.

<div class="maintext">
<div class="leftimg">
<img src="dinner1.jpg" width="400" height="300">
<h3><span>Big American Burger</span></h3>
</div>

<div class="leftimg">
<img src="dinner2.jpg" width="400" height="300">
<h3><span>Tasty Carvery</span></h3>
</div>
<div class="leftimg">
<img src="dinner3.jpg" width="400" height="300">
<h3><span>Sausage and Chips</span></h3>
</div>
<div class="leftimg">
<img src="dinner4.jpg" width="400" height="300">
<h3><span>Delicious Deserts</span></h3>
</div>
<div class="leftimg">
<img src="dinner5.jpg" width="400" height="300">
<h3><span>Big American Burger</span></h3>
</div>

<div class="leftimg">
<img src="dinner6.jpg" width="400" height="300">
<h3><span>Tasty Carvery</span></h3>
</div>
<div class="leftimg">
<img src="dinner7.jpg" width="400" height="300">
<h3><span>Sausage and Chips</span></h3>
</div>
<div class="leftimg">
<img src="dinner8.jpg" width="400" height="300">
<h3><span>Delicious Deserts</span></h3>
</div>
</div>


And the css

.leftimg {
position:relative;
width:400px;
height:300px;
margin-bottom:20px;
left:10%;

}

h3 span{
position: absolute;
top: 65%;
left: 0;
width: 100%;
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
text-align: center;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding-top: 3px;
padding-bottom: 3px;
}

Answer

i wouldn't use a fixed with considering that the screen size might be smaller.

but nevertheless you should use float: left or display: inline-block on the images.

and skip the left: 10% and use a margin-left: 10% instead

.leftimg {
    position:relative; 
    width:400px;
    height:300px;
    margin-bottom:20px;
    float: left;
    margin-left: 10%;
}

if you want this whole thing centered on your page wrap it with following container and use display: inline-block on the images:

.parent-container {
    width: 100%;
    position: relative;
    text-align: center;
}

.leftimg {
    position:relative; 
    width:400px;
    height:300px;
    margin-bottom:20px;
    display: inline-block;
}

maybe i can help you with this fiddle! You need to add img {width: 100%} in order to let the image be the size of its parent

Update 2:

it's really difficult for me to find out what you really need :) maybe you can provide further information (maybe a screenshot) what the expected outcome should be.

i added a clear: both every second image - maybe like this?

.leftimg:nth-child(2n - 1) {
  clear: both;
}

and instead of using float: left it's float:right now - so it's on the right side of the screen.. furthermore it's a little bit smaller width: 25%

JsFiddle

Comments