Sunday, 18 August 2013

Spacing on inside of image in grid

Spacing on inside of image in grid

I apologize, I'm sure the solution to this must be on this site somewhere,
but I'm not sure what words to search for to find it.
I'm trying to create a grid of images (2 wide x unlimited down) using a
left float with space between the left and right image on the page. I'm
familiar with the first child command, and I've tried using it here, but
this only works on removing the left margin on the first image, and not
all images on the left side.
How do I go about lining up an unlimited (the list will end, it's just
different for every page) amount of images with no space on the outer
edges, but space in the inside?
My CSS:
section{
width: 940px;
min-height: 400px;
margin: 0 auto;
padding: 10px 0 0 0;
}
.package{
width: 450px;
height: 180px;
background-color: #f1f6fb;
float: left;
margin: 20px 0 20px 40px;
}
.package-image{
margin: 20px;
float: left;
}
.package-description{
width: 255px;
height: 160px;
float: left;
margin-top: -10px;
}
.favourite{
position:relative;
top: 30px;
left: -150px;
}
.first {
margin-left: 0;
}
My html:
<section>
<div class="package first">
<img class="package-image"
src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg">
<img class="favourite" src="./images/favourite-no.png">
<div class="package-description">
<h4>package name</h4>
<h5><a href="#">company name</a></h5>
<p>package description</p>
</div>
</div>
<div class="package">
<img class="package-image"
src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg">
<img class="favourite" src="./images/favourite-no.png">
<div class="package-description">
<h4>package name</h4>
<h5><a href="#">company name</a></h5>
<p>package description</p>
</div>
</div>
<div class="package">
<img class="package-image"
src="./images/aeyracakes_sakuraminicakes-_1_medium.jpg">
<img class="favourite" src="./images/favourite-no.png">
<div class="package-description">
<h4>package name</h4>
<h5><a href="#">company name</a></h5>
<p>package description</p>
</div>
</div>
<div class="clearfix"></div>
</section>
Thanks!

No comments:

Post a Comment