A CSS website layout that works for all screen resolutions

It seems like it’s becoming normal for every website to have two layouts, one for real computers and another for mobile phones with teensy-tiny little screens. I am way too lazy to be dealing with that, so I came up with a layout that works for screen widths from 100px and up. I’ve only tested it on Firefox, but it passed the W3C’s HTML and CSS validators, which hopefully means there is a decent chance it’ll work in most browsers. Here are some screenshots:

There’s a three-column version and a two-column version. Here’s the code:

Three column layout:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Three-column layout that works for all screen resolutions</title>

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    max-width:1000px;
    margin: 0px auto;
    background-color: grey;
}
#nav {
    background-color: orange;
}
#header {
    background-color: pink;
}
#main {
    max-width: 600px;
    min-width: 100px;
    float: left;
    background-color: yellow;
}
#widgets {
    min-width: 100px;
    max-width: 200px;
    float: left;
    background-color: cyan;
}
#moreWidgets {
    min-width: 100px;
    max-width: 200px;
    float: left;
    background-color: blue;
}
#footer {
    background-color: red;
    clear: both;
}
</style>
</head>

<body>

<div id="nav">
<ul>
    <li><a href="">Account settings</a></li>
    <li><a href="">Some other stuff</a></li>
</ul>
</div> <!--#nav-->

<div id="header">
<h1>header</h1>
</div> <!--#header-->

<div id="main">

<h2>Update your status</h2>

<textarea>Awesomeness...</textarea>

<h2>Your stream</h2>

<div class="streamItem">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div> <!--.streamItem-->

</div> <!--#main-->

<div id="widgets">

<div class="widget">
<p>Here is a widget.</p>
</div> <!--.widget-->

<div class="widget">
<p>Here is another widget.</p>
</div> <!--.widget-->

</div> <!--#widgets-->

<div id="moreWidgets">

<div class="widget">
<p>Here is a widget.</p>
</div> <!--.widget-->

<div class="widget">
<p>Here is another widget.</p>
</div> <!--.widget-->

</div> <!--#moreWidgets-->

<div id="footer">
<p>This is the footer. Some info goes here.</p>
</div> <!--#footer-->

</body>

</html>

Two column layout:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Two-column layout that works for all screen resolutions</title>

<style type="text/css">
* {
    margin: 0px;
    padding: 0px;
}
body {
    max-width:800px;
    margin: 0px auto;
    background-color: grey;
}
#nav {
    background-color: orange;
}
#header {
    background-color: pink;
}
#main {
    max-width: 600px;
    min-width: 100px;
    float: left;
    background-color: yellow;
}
#widgets {
    min-width: 100px;
    max-width: 200px;
    float: left;
    background-color: cyan;
}
#footer {
    background-color: red;
    clear: both;
}
</style>
</head>

<body>

<div id="nav">
<ul>
    <li><a href="">Account settings</a></li>
    <li><a href="">Some other stuff</a></li>
</ul>
</div> <!--#nav-->

<div id="header">
<h1>header</h1>
</div> <!--#header-->

<div id="main">

<h2>Update your status</h2>

<textarea>Awesomeness...</textarea>

<h2>Your stream</h2>

<div class="streamItem">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div> <!--.streamItem-->

</div> <!--#main-->

<div id="widgets">

<div class="widget">
<p>Here is a widget.</p>
</div> <!--.widget-->

<div class="widget">
<p>Here is another widget.</p>
</div> <!--.widget-->

</div> <!--#widgets-->

<div id="footer">
<p>This is the footer. Some info goes here.</p>
</div> <!--#footer-->

</body>

</html>
Advertisements

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 )

Google+ photo

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

Connecting to %s