I expected the middle column to be 3 times as wide as the left and right columns. Instead of the withs appearing as specified 200,600, 200 (left to right), the widths appeared as if I specified them in this order: 200, 200, 600. In other words, the LAST column appeared 3 times as wide as the first two.
Why? (This is my primary question)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
</head>
<body>
<table style="table-layout: fixed; width:1000px;">
<colgroup>
</colgroup>
<colgroup>
<col width="200px">
<col width="600px">
<col width="200px">
</colgroup>
<tr>
<td>1 </td>
<td>2 </td>
<td>3 </td>
</tr>
</table>
</body>
</html>
Also, does the following non table approach have any advantages? (This is a secondary question that has been answered)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Left</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="Untitled_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div style="width:1000px;">
<div id="masthead">
</div>
<div id="top_nav">
</div>
<div id="container">
<div id="left_col">Left
</div>
<div id="right_col">RIght
</div>
<div id="page_content">Page Content </div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
CSS:
#left_col {
width: 200px;
margin:0px;
float: left;
}
#page_content {
margin-left: 200px;
margin-right: 200px;
width: 600px;
}
#right_col
{
width: 200px;
float: right;
}
You have an extra set of colgroup tags with nothing in them. I guess the browser is inserting one (empty) column definition for that and then three more in the second colgroup, because the browser is trying its best to do what you want. Remove the empty colgroup tabs and it’ll work as expected.