[thelist] CSS Layouts
Liam Delahunty
ldelahunty at britstream.com
Sun Aug 25 07:09:01 CDT 2002
Ken Kogler wrote:
> I'm trying to accomplish this layout in CSS:
>
> (this DIV is aligned center within the browser window)
> +------+--------------+
> | | |
> | | |
> | | |
> | | |
> | | |
> | | |
> | | |
> +------+--------------+
>
Howz-about:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<style type="text/css">
<!--
body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
DIV.centrebox {
position:absolute;
left:50%;
top: 0px;
width: 500px;
height: 100%;
margin-left: -250px;
background-color: #336699;
}
DIV.leftcol {
position: absolute;
top: 0px;
width: 100px;
height: 100%;
background-color: #cccccc;
}
DIV.rightcol {
position: absolute;
top: 0px;
left: 100px;
width: 400px;
background-color: #0099ff;
}
-->
</style>
</head>
<body>
<a name="top"></a>
<div class="centrebox">
<div class="leftcol">
This is the left column.
This is the left column.
This is the left column.
This is the left column.
This is the left column.
</div>
<div class="rightcol">
This is the right column.
This is the right column.
This is the right column.
This is the right column.
This is the right column.
This is the right column.
</div>
</div>
</body>
</html>
Got a URL we can look at? I've just whipped this up quickly, I know it's
okay in Opera 6, but haven't looked at anything else...
Kind regards,
Liam
More information about the thelist
mailing list