[thelist] CSS Layouts

Tony Light TonyLight at blueyonder.co.uk
Mon Aug 26 06:06:00 CDT 2002


--
[ Picked text/plain from multipart/alternative ]
Sorry if this is too late to help - I'm on the digest.

Ken Kogler wrote:

> I'm trying to accomplish this layout in CSS:
>
> (this DIV is aligned center within the browser window)
>             +------+--------------+
>             |      |              |
>             |      |              |
>             |      |              |
>             |      |              |
>             |      |              |
>             |      |              |
>             |      |              |
>             +------+--------------+
>

I just tried the following:

<style type="text/css">
div#container {text-align: center; height: 100%;}
div#left {background: green; display: inline; height: 100%; width: 20%; text-align: left;}
div#right {background: red; display: inline; inline; height: 100%; width: 40%; text-align: right;}
</style>

<body>
<div id="container">
<div id="left">
This should have some data in, and be on the left side.
</div>
<div id="right">
This should have some data in, and be on the right side.
</div>
</div>
</body>

The basic principle is the 'container' div with contents centered, which contains other divs with display set to inline.

HTH.

Regards,
Tony.
--




More information about the thelist mailing list