CSS formating question

[jumpink]

I am looking to have nine images in three symmetrical rows. Right now I can format two rows with this coding.
.splitright {
background-color: #FFFFFF;
width: 49%;
float: right;
overflow: hidden;
}

.splitleft {
background-color: #ffffff;
width: 49%;
float: left;
overflow: hidden;
}
How can I get a middle row in. Thanks in advance.
Kevin

[katarey]

Try This

Style :

.win
	{
		width:33%;
		float:left;
		overflow:hidden;
		border:1px solid #000;
	}

HTML

<div class="win">Left</div>
<div class="win">Middle</div>
<div class="win">Right</div>

Regards,
Rahul

[jumpink]

Thanks for all the help. I have it set now to three images per row. The images line up symmetrically in IE but not FF.

div#gallery {text-align: center;}

div#gallery img {margin: 0 10px 10px 10px;padding-bottom: 0;background: white url(images/bg_thumb.jpg) no-repeat 0% 0%;border: 0;}

<div id="gallery">

<a href="#pic"><img src="images/s00253.gif" width="222" height="212" alt="Image 1" /></a>
<a href="#pic"><img src="images/s00253.gif" width="222" height="212" alt="Image 2" /></a>
<a href="#pic"><img src="images/s00253.gif" width="222" height="212" alt="Image 3" /></a>

<br style="clear: both" />

<a href="#pic"><img src="images/s00253.gif" width="222" height="212" alt="Image 4" /></a>
<a href="#pic"><img src="images/s00253.gif" width="222" height="212" alt="Image 5" /></a>
<a href="#pic"><img src="images/s00253.gif" width="222" height="212" alt="Image 6" /></a>

</div>

Thanks again

[MidiMagic]

There is a difference between how Firefox and IE render pages. One includes all of the margins, borders, and padding within the declared box size of the item. The other does not include them, but adds them to the declared size of the item.

This means that nothing that you define as a rigid size works the same on both browsers. (And remember that your rendering will completely fall apart with a different screen resolution.)