what should it be...?

[oo7ml]

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


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


thanks in advance

[KDLA]

First, add "display: block;" to your image styles. Then, float the images, rather than having them display inline.

[oo7ml]

Ok cool, thanks, i will try that. Is it ok to put divs that same width inside each other (if i don't have a border around any of them) thanks again

[KDLA]

I don't see the need, but I would guess it would be OK.....

[WebJoel]

Is it ok to put a div (or multiple divs) inside another div that is the same width as itself? Do you think this won't work? You cannot fit a one-inch box inside of another 1-in box, a 800px wide div will probably not contain another 800px wide div. Ig even 1px of border, padding, margin etc. is added, -the whole thing will collapse.
Make the 'container' or 'wrapper' be 800px wide, and the 'contents' DIV be width:100%; and it will swell to 'fill' whatever width is available inside this 800px wide container (thus freeing your to add, use a border, padding, margin, etc).

You are of course aware that width:800px; will make a horzontal scrollbar on a 800px by 600px monitor, yes? About 760px width accounts for the width of the vertical scrollbar (which is 20px wide), and most people don't have their browser "maximized" anyway. If designing to include 800 x 600 AND avoiding horizontal scrollbars (universally desipised!), make the 'wrapper' container be width:760px or a bit less...
Or, go 'fluid' and use a percentage.