CSS Image Floating

[dtraikov]

Hey guys,

I'm making my own site and I want to position a number of images right next to each other like the ones in this site : http://www.cutestpaw.com/

So far I've got to here: http://img15.imageshack.us/img15/9751/blahp.png
and I don't know how to remove the space marked with red.

Here's my code so far:

<style type='text/css'>
#gallery img {
	vertical-align: top;
	display: block;
	margin: 0px;
	padding: 0px;
	width: 290px;
	float: left;
}
</style>
<div id='gallery'>
<img src='...' />
<img src='...' />
<img src='...' />
...
</div>

Any help woud be really appreciated :]

[danielshill]

Unfortunately I am unable to view that page from my location. Can you set up an example at http://jsfiddle.net/?

[handcraftedweb]

You need to arrange things in columns to get what you want. Here's a fiddle showing that. Replace the colored divs with imgs. Here's the code:

.col {width:200px;float:left;}
.red {background-color:red; width:200px; height:155px; }
.green {background-color:green; width:200px; height:105px; }
.blue {background-color:blue; width:200px; height:135px; }
.yellow {background-color:yellow; width:200px; height:75px; }

<div class="col">
    <div class="red"></div>
    <div class="green"></div>
    <div class="blue"></div>
</div>
<div class="col">
    <div class="blue"></div>
    <div class="yellow"></div>
    <div class="red"></div>
</div>​

You don't have to float the imgs or anything (you do have to float the columns). Just make sure the width of the imgs is the same as the columns and they'll stack right in nicely.