Text extending beyond parent container. Why?

[jtibbetts]

I'm attempting to create a two column setup inside a black bordered box. The "main_body" box grows/shrinks with the text in the right column, but the text in the left column extends beyond the boundaries of the "main_body" container if it gets too long. This basically happens when the right column has no content. Can anyone solve this for me?

#main_body {
border: 1px solid #000000;
padding: 20px;
background: #ffffff;
}

#left_column {
position: absolute;
width: 150px;
}

#right_column {
margin-left: 180px;
}

###################

<div id="main_body">

<div id="left_column">text that overflows the boundaries of main_body if it gets too long...</div>

<div id="right_column">text that correctly causes the "main body" box to grow/shrink with it.</div>

</div>

[dcrombie]

By using "position: absolute" you take the left column out of the 'flow' of the page. It won't affect ANY page formatting.

You can try this - note the extra BR in the right_column DIV:

<STYLE>

#main_body {
border: 1px solid #000;
padding: 20px;
}

#left_column {
float: left;
width: 150px;
}

#right_column {
margin-left: 180px;
}

</STYLE>

<div id="main_body">
<div id="left_column">
text that overflows the boundaries of main_body if it gets too long...
</div>
<div id="right_column">
text that correctly causes the "main body" box to grow/shrink with it.
<BR clear="left">
</div>
</div>

[jtibbetts]

That worked!

I'm not sure why a <br clear="left"> in the *right* column would effect the left column like that, however.

Either way, thanks for the quick solution. I can stop pulling my hair out now. ;)

[DaScribbler]

Wouldn't just adding

 margin-right: 20px 

to the left column do the same?

[jtibbetts]

I removed the <br clear="left"> tag from the right column and added "margin-right: 20px" to the left column, and the problem came back.