content in main div overflows its containers

overflowing containers

[marcs131]

hi everyone,
im a css newbie and was just having some problems with my code. ive run both my style sheets and html thru the w3 validators so they are fine:

basically i have:

<div id="outer-container">
<div id="inner-container">

<div id="navigation-box">
<ul class="navigation-list">
navigation list links - 8 of them
</ul>
</div>

<div id="main-box">

overflows inner and outter containers<br>
overflows inner and outter containers<br>
overflows inner and outter containers<br>
overflows inner and outter containers<br>
overflows inner and outter containers<br>

</div>
</div>
</div>

if the content in the main-box div overflows, in firefox it does not increase the size of the inner and outter containers as it does in internet explorer. ive tried a few things like using min-height and played around with overflow: visible but cant get it happening.

here are the affective style sheet attributes:

#outer-container
{
margin: auto;
width: 700px;
min-height: 380px;
background-color: #A8A8A8;
color: #000000;
padding-bottom: 25px;
}

#inner-container
{
margin: auto;
width: 650px;
min-height: 380px;
background-color: #FFFFFF;
color: #000000;
}

#navigation-box
{
display: block;
margin: auto;
width: 120px;
height: 350px;
border-right: 2px solid #A8A8A8;
float: left;
}

#main-box
{
margin: auto;
text-align: center;
width: 520px;
float: right;
}

looking forwar to hearing from you

kindest regards
mark

[drhowarddrfine]

Firefox is performing correctly while IE is not. Divs are not to expand as you have seen. This is not the job of floats. Google for "clearing floats" to solve the problem.

[marcs131]

^^^^ sorry i dont quite understand this? could someone better explain it to me