[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