My main container div is 800px wide. I have a div inside that called portals which is also 800px in width (none of my divs have borders). Inside the portals div, i have 3 images that are 228px in width. I have set a margin-right:58px on the first two images so that they are evenly spread: 228 + 58 + 228 + 58 + 228 = 800px However the 3rd image keeps collapsing under the first two images. Why is this? Is it ok to put a div (or multiple divs) inside another div that is the same width as itself? here is my code: #content { width:800px; margin:0px auto 0px auto; } #flash { width:800px; height:409px; display:block; margin:-1px 0px 0px 0px; } #main { width:800px; text-align:left; display:table; } #portals { width:800px; margin:0px 0px 20px 0px; } #portals img { width:228px; height:223px; } .img_space { margin:0px 58px 0px 0px; } Code (markup): <div id="content"> <div id="flash"> <!--[if !IE]> --> <object type="application/x-shockwave-flash" data="flash/movie.swf" width="800" height="409"> <!-- <![endif]--> <!--[if IE]> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="800" height="409"> <param name="movie" value="flash/movie.swf" /> <!--><!--dgx--> <param name="loop" value="true" /> <param name="menu" value="false" /> </object> <!-- <![endif]--> </div> <div id="main"> <div id="portals"> <img src="images/1.jpg" class="img_space" alt="1" /> <img src="images/2.jpg" class="img_space" alt="2" /> <img src="images/3.jpg" alt="3" /> </div> </div> </div> HTML: thanks in advance
It's definitly ok to nest one or more divs. Did you try to add a float:left; to your .img_space? Did you set some additional padding anywhere?
Why do you have display:table setting on the main div? Try getting rid of this. Also change the width of portal to 100% instead of 800px. Do you have any borders anywhere because this could also add to the margins and width of the image. Have you played around with it, i.e taking 5 or 10px off each picture/the margin? You could just put each image inside another div with this class: .image {width:33%; float:left; margin: 0px auto; text-align:center;} So it would then be <div class="image"> Pic 1 </div> <div class="image"> Pic 2 </div> <div class="image"> Pic 3 </div>
He said there were no borders. Though I agree with wd that display: table might be doing something seriously funky. Setting portal either a width of 100% or no width at all is certainly doable. I'll bet if something is reduced by a few pixels, in someone other than IE, everyone will fit. If that's so, you've got rounding errors possible. If something, somewhere is like 2.5px, which doesn't exist, the browsers get to guess how wide it is in full px. Some round up, and some round down. Hmmm, and while I'm looking, the last one shouldn't be inheriting the margin because the general declaration is on top, but just maybe you need to set margins to 0 in the first, general image decaration (and let the one with the img_space override). I don't think this is it, but it occured to me. Give each of your elements a different background image and view in FF. Do you see anyone sticking out of the main div?
They're inline - inline elements get white space between them converted into single spaces - that one space between them is what's messing you up. Since you want them on the same line, you either need to remove the white-space between them, or float them left. I suggest floating them, then using the overflow:hidden/haslayout method to make their container wrap them. Some 'observations': width on a block element is automatically that of it's container - you don't need to state 800px more than once. (unless you want to use it to trip haslayout) display:table as noted by others - bad idea. margin properties that mirror should be condensed. You don't need to specify a metric on zero. DIV are inherently display:block, you don't need to set it again. Make sure you margins and padding are zeroed BEFORE applying your styling. When you have a bunch of items the same and one that's different, put the class on the different one, NOT the like ones. Inlined conditionals for HTML is almost always a total miserable /FAIL/ - especially when there's nothing wrong with sending ANY of the parameters in either 'version' to all browsers. You do know 800px is not 800px friendly, right? (at which point I'd make use of that extra 224 px made available targeting 1024) I just slapped together this 'test' - seems to work cross browser just fine: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title> inline demo </title> <style type="text/css"> * { margin:0; padding:0; } #content { width:800px; margin:0 auto; } #flash { height:409px; margin:-1px 0px 0px 0px; } #main { text-align:left; } #portals { overflow:hidden; /* wrap floats */ width:800px; /* width trips haslayout, wraps floats IE */ margin-bottom:20px; } #portals img { float:left; width:228px; height:223px; margin-right:58px; border:0; } #portals .last { margin:0; } </style> </head><body> <div id="content"> <div id="flash"> <object type="application/x-shockwave-flash" data="flash/movie.swf" width="800" height="409" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" > <param name="movie" value="flash/movie.swf" /> <param name="loop" value="true" /> <param name="menu" value="false" /> </object> <!-- #flash --></div> <div id="main"> <div id="portals"> <img src="images/1.jpg" alt="1" /> <img src="images/2.jpg" alt="2" /> <img src="images/3.jpg" alt="3" class="last" /> </div> <!-- #main --></div> <!-- #content --></div> </body></html> Code (markup): and because it's a right margin on a left float, you don't even have the headache of the double margin bug. (but if that does crop up, slap display:inline next to those floats)