954,595 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Have something to say? Contribute New Article Reply to this Article

CSS formating question

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

jumpink
Newbie Poster
5 posts since Mar 2007
Reputation Points: 10
Solved Threads: 0
 

Try This

Style :
[HTML]
.win
{
width:33%;
float:left;
overflow:hidden;
border:1px solid #000;
}[/HTML]

HTML
[HTML]Left
Middle
Right
[/HTML]

Regards,
Rahul

katarey
Junior Poster
167 posts since Jul 2005
Reputation Points: 39
Solved Threads: 23
 

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

Image 1 Image 2 Image 3


Image 4 Image 5 Image 6

Thanks again

jumpink
Newbie Poster
5 posts since Mar 2007
Reputation Points: 10
Solved Threads: 0
 

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.)

MidiMagic
Nearly a Senior Poster
3,319 posts since Jan 2007
Reputation Points: 730
Solved Threads: 182
 

This article has been dead for over three months

Post: Markdown Syntax: Formatting Help
You