Menu
Hello,
I have a bunch of divs floating left (so that they line up). They are given relative widths and are in a container that contains a relative width. The following is an example
[CODE]
<HTML>
<HEAD>
<style type=”text/css”>
div.container{
width:100%;
}
div.one{
float: left;
width:30%;
border: 1px solid blue;
}
div.two{
float: left;
width:20%;
border: 1px solid green;
}
div.three{
float: left;
width:30%;
border: 1px solid red;
}
div.four{
float: left;
width:19%;
border: 1px solid black;
}
table.full{
width:100%;
}
</style>
<TITLE>TEST</TITLE>
</HEAD>
<BODY>
<div class=”container”>
<div class=”one”>
<table class=”full”>
<tr>
<th>Purchase Date</th>
<th>Item</th>
<th>Cost</th>
</tr>
<tr>
<td>January 10, 2009 11:55 am</td>
<td>Mitre saw with guiding laser</td>
<td>$120.99 </td>
</tr>
<tr>
<td>January 12, 2009 2:32 pm</td>
<td>55 inch plasma television</td>
<td>$1500 </td>
</tr>
<tr>
<td>January 12, 2009 2:32 pm</td>
<td>Blu ray home theatre system with surround sound</td>
<td>$650 </td>
</tr>
</table>
</div>
<div class=”two”>
This is another div. Yup….just another div
More details
More details
More details
More details
More details
More details
More details
</div>
<div class=”three”>
A third div
</div>
<div class=”four”>
A third div
</div>
</div>
</BODY>
</HTML>
Is there a way to prevent the wrapping? I know that I can do so by specifying a hardcoded width, but I really do not want to do that.