Creating a website page layout that scales nicely for different resolutions and font sizes is quite simple to achieve using cascading style sheets. In this tutorial I attempt to create such a layout, and try to create a simple example webpage using xhtml and css.
For this tutorial two files are required: the html file (I am using index.html), and the css file (which I have named style.css).
For testing I am using the latest version of Chrome (12.0…. – actually it is currently updating automatically), Firefox (5.0) and I use an excellent tool for testing in Internet Explorer called IETester (Get it here).
For my design (which I will be using for a WordPress template layout) I require a header, a content area, a sidebar, and a footer.
Let’s start with the html file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Fluid Layout</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="bodywrapper"> <div id="header"> <h1>Header</h1> </div> <div id="contentwrapper"> <div id="content"> <div class="thumbcontainer"> <img src="thumb.jpg" /> </div> <h2>Main Content</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consequat libero varius diam lobortis scelerisque vel eu justo. Mauris id erat et metus semper consequat. Nulla gravida gravida lacinia. Integer vulputate tincidunt ante scelerisque molestie. Suspendisse et odio dui. Aenean eget metus vehicula leo aliquam blandit id sit amet magna. Nulla nec nulla posuere erat mattis blandit ac vel dolor. Curabitur est risus, posuere vel varius elementum, tempus eget leo. Nunc at lacus justo, eget bibendum nibh. Etiam mattis adipiscing ante, congue elementum felis varius in. Donec malesuada dui et nibh porttitor volutpat.</p> <p>Etiam et purus in odio mattis posuere fermentum non neque. Maecenas elementum lectus sagittis metus porttitor vitae fermentum magna auctor. Sed nec lorem nec est sagittis vestibulum. Pellentesque ac ornare mauris. Nulla ac tempus enim. Donec feugiat velit et enim vehicula sodales. Donec aliquet augue eu leo gravida vel scelerisque velit dignissim. Ut eleifend, nunc eget mollis sodales, ipsum ligula ultricies eros, ac aliquet tellus eros nec neque. Vestibulum a urna enim. Maecenas quis risus libero. Sed dictum molestie semper. In hac habitasse platea dictumst. Pellentesque vitae nibh vitae augue viverra condimentum.</p> <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam vel posuere magna. Pellentesque bibendum tortor sed orci venenatis accumsan aliquet lorem placerat. Nullam ut risus tortor. Aliquam lobortis, nunc sed iaculis mollis, velit arcu accumsan elit, quis fringilla turpis sapien quis lacus. Aenean sollicitudin, neque viverra rutrum lacinia, lectus orci vulputate lacus, nec hendrerit tellus neque et mi. Curabitur tempor ultrices accumsan. Vivamus at lacus leo. Praesent quis mi dolor, quis molestie tortor. Maecenas tincidunt sapien non elit euismod lacinia. Vestibulum iaculis, est eget suscipit bibendum, nisi dui dictum elit, in accumsan risus diam sed nisi. Phasellus rhoncus velit pretium risus bibendum dapibus.</p> </div> </div> <div id="sidebarwrapper"> <div id="sidebar"> <ul> <li> <h2>Sidebar</h2> </li> <li> <h2>Categories</h2> </li> </ul> </div> </div> <div id="footer"> <h2>Footer</h2> </div> </div> </body> </html>
The “bodywrapper” div is going to be the main container for the whole body, which will allow us to centre the content onto the page.
The “content” div is where our main page content will be going, and the “sidebar” div is for the sidebar. Note that both of these are contained in their own wrapper divs. These wrapper divs will allow us to keep a proportional layout without margins and paddings getting in the way. They are to be used as containers only.
Now, lets create the style sheet:
body, p, h1, h2, h3, h4, ul, li, form, input, img{
border: 0;
margin: 0;
padding: 0;
list-style: none;
}
body{
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 62.5%;
background-color: #ddf;
}
h1,h2,h3,h4,h5{
font-family: helvetica, arial, sans-serif;
padding-bottom: 0.6em;
text-shadow: 1px 1px 0px rgba(0,0,0,0.3);
}
#bodywrapper{
margin: 0 auto;
width: 100em;
max-width: 100%;
min-width: 48em;
}
#contentwrapper{
float: left;
width: 70%;
}
#content{
position: relative;
margin-left: 2px;
background-color: #fff;
padding: 1.5em;
border-radius: 0.5em;
box-shadow: 3px 3px 7px rgba(0,0,0,0.5);
}
#sidebarwrapper{
position: relative;
float: right;
width: 30%;
}
#sidebar{
font-size: 0.8em;
background-color: #eef;
margin-left: 1em;
margin-right: 2px;
padding: 1em;
border: 1px #fff solid;
border-radius: 0.5em;
box-shadow:1px 1px 3px rgba(0,0,0,0.4);
word-wrap: break-word;
}
#footer{
clear: both;
}
.thumbcontainer{
float: left;
width: 15em;
max-width: 33.3%;
line-height: 0;
border-radius: 6px;
padding: 4px;
background-color:#ddf;
border: 1px #fff solid;
box-shadow:2px 2px 6px rgba(0,0,0,0.75);
margin-right: 1.5em;
}
.thumbcontainer img{
width: 100%;
border-radius: 4px;
}
p{
font-size: 1.5em;
padding-bottom: 1.2em;
line-height: 1.4em;
}
h1{font-size: 3em;}
h2{font-size: 2.4em;}
Lines 1-6 is a simple css reset. This will contain a lot more elements and attributes for a final release, but for this tutorial this will do.
Take a look at the style sheet and notice that the majority of unit values are either em or percentages. On line 6 I set the body font to 62.5%. Why? Because by default the major browsers use a font size of 16px and 62.5% of this is 10px giving us a base value that is easier to work with. On line 82 the p tag is set to 1.5em which is equivalent to 15px based on the browsers default font size.
You may be asking why I am basing my sizing on browser default values. The main reason is that you should NOT try and force your visitors to view your site using a font size that they may not appreciate. If the visitor has poor eye site and has made changes to their system to increase the default font size, why would you alienate these visitors? A default 1em=16px standard has been adopted by all major browsers, so just use that.
In the #bodywrapper section (line 20) I have set a width of 100em (approx. 1000px), a max-width of 100% and min-width of 48em(approx. 480px). The max-width and min-width values basically set a rule which says: “Don’t let the content stretch wider than the browser window, unless the width of the content is less than 48em”. Older versions of IE do not support min/max-width so will just use the 100em width, the scaling will be gone, but the content will not get destroyed.
The #contentwrapper and #sidebarwrapper have widths of 70% and 30% so that they are proportionally the same size regardless to the browser window size.
Notice we have also thrown in an image. This image also scales nicely. If it didn’t it would end up with an image that takes up all of the content area (or even overlap it). If you look at the .thumbcontainer section I have set it’s initial width to 15em (approx. 150px) but have also set a max-width of 33.3% which prevents the image from ever being wider than a third of the content area. The image width itself is set to 100% of this container.
This can be used if you want to display an image (instead of a thumbnail) in a post. By setting the max-width of the container to 100% (or maybe slightly less if using a padded container like I have) you can guarantee the image to never be wider that the content area.
To see what this is meant to look like, take a look at the demo page. Resize the browser window size, and change the browsers default font size to see how the layout changes.
