Two column html with complete height of the browser.

Here is a small snippet that will help you achieve a two column layout with complete height of the browser.

<html>
<body style=”margin:0px;height:100%”> <!– key point in having browser height –>
<div style=”width:50%;background:#600;height:100%;float:left;”></div>
<div style=”width:50%;background:#444;height:100%;float:right;”></div>
</body>
</html>

Here is the result of the above code.

You might want to add the styles to seperate classes and code more neatly. ;)

Advertisement
    • P. Koch
    • January 21st, 2011

    Perfect. Thanks so much, I was fighting with this for a long time, being a total noob with HTML.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.