Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences inside td tags causing the column to widen and spill over.
If setting the table width to 100% causes the third column to overflow below the first two columns, you may need to use a fixed width for the table. This contradicts the goal of having the page size itself automatically. Is there a workaround for this dilemma?
<div class="column1">
</div>
<div class="column2">
</div>
<div class="column3">
<table width="300px"> <!- would prefer 100% -->
</table>
</div>
CSS Code:
div.column1, div.column2 {
float: left;
max-width: 280px;
padding: 5px;
}
div.column3 {
float: left;
min-width: 280px;
padding: 5px;
}
.column3 table {
table-layout: fixed;
word-wrap: break-word;
}
.column3 td {
white-space: normal;
word-wrap: break-word;
}