|
|
Posted by roel.schreurs on 10/10/05 16:55
Hi All,
I need to build a page with an absolute total width. Three columnar
sections must be in there. These columns themselves must be capable of
containing mark-up themselves.
I have been testing with IE6.0, but I would like to be as generic as
possible, or, rather conforming the HTML 4.01 specification.
Also, the content need to be centered in the browser. I know how to do
this using a table, but I am supposed to use that element.
I have been trying to achieve this using the DIV element, but got only
as far as a scalable page with margins. Note that the differences are
made clear when you modify the width of the browser window. Below some
very simple examples are shown. Could anybody help me there?
TABLE test with absolute widths. This is how it should look like.
<html>
<head>
<title>
TABLE test with absolute widths
</title>
</head>
<body>
<table border="0" align="center">
<tr>
<td width="100px" style="background:red">
LEFT
</td>
<td width="400px" style="background:yellow">
MIDDLE
</td>
<td width="100px" style="background:green">
RIGHT
</td>
</tr>
</table>
</body>
</html>
DIV test with relative widths. This a variant I can get to work, but
not exactly what it should look like.
<html>
<head>
<title>
DIV test with relative widths
</title>
</head>
<body>
<div style="background:blue; margin-left: 20%; margin-right: 20%;">
<div style="background:red; float:left; width=10%">
LEFT
</div>
<div style="background:yellow; float:left; width=40%">
MIDDLE
</div>
<div style="background:green; float:left; width=10%">
RIGHT
</div>
</div>
</body>
</html>
DIV test with absolute widths; not working properly. The content keeps
left aligned.
<html>
<head>
<title>
DIV test with absolute widths; not working properly
</title>
</head>
<body>
<div style="background:blue; margin-left:auto; margin-right:auto;
width=600px">
<div style="background:red; float:left; width=100px">
LEFT
</div>
<div style="background:yellow; float:left; width=400px">
MIDDLE
</div>
<div style="background:green; float:left; width=100px">
RIGHT
</div>
</div>
</body>
</html>
[Back to original message]
|