I am facing an issue with two float:left divs that are supposed to stack left-to-right. One div is a fixed width left nav, while the other should span the remaining width of the browser. The problem arises when there is a table in the second div with multiple columns of tabular results. When the cumulative text in the table cells pushes the table width to match the div's size, the div moves under the left nav.
Is there a way to constrain the table from expanding beyond the parent div's width and instead make the text wrap inside the cells? I would prefer not having to use JS for this purpose.
<div id="container">
<div id="leftNav" style="width:250px;">
left<br>nav<br>here<br>
</div>
<div id="mainContent">
<table>
<tr><td>about</td><td>10</td><td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td></tr>
</table>
</div>
</div>
and the css:
#container{
width:100%;
}
#leftNav{
float:left;
width:250px;
border:1px solid #ccc;
padding:15px;
}
#mainContent{
float:left;
background-color:aliceblue;
}
/* nothing more*/