Making a Fluid Width XHTML/CSS Template

May 23rd, 2007 by awesty

In this tutorial we will make a fluid width (which means it will resize depending on the size of the window and the screen resolution) web template with valid XHTML and valid CSS. So that means no tables, sorry guys .

You can see an example here. It looks best in Firefox, but it still works in IE. If you do not have firefox I strongly recommend you get it.

First of all we want to set up our HTML document. Open notepad or dreamweaver or any other text editing program (except Microsoft word). This is what we are aiming to do:

The layout

I didn’t label it on the image but the sidebar and the posts are inside a div called ‘main’. It is the browny yellowy parts on either side of the sidebar and posts.

Here is the code for that:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fluid Width in XHTML/CSS Tutorial - Awesty Productions</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
Your sites name
</div><!– Close Header –>

<div id="sidebar">
Some Links or something
</div><!– Close Sidebar –>

<div class="post">
Another Post
</div>

<div class="post">
Again, Another Post
</div>

</div><!– Close Main –>

<div id="footer">
Some copyright information or something
</div><!– Close Footer –>

</body>
</html>

That is pretty simple. Each section is a div. The posts are classes, instead of id because they are used more than once. If you use a id more than once it isn’t valid XHTML. This line, <link href=”style.css” rel=”stylesheet” type=”text/css” />, which should be just before the tag that closes head, </head>, imports a style sheet. It is importing style.css, so make sure you save your style sheet in the same directory as the HTML document and with the name style.

Here is the code I used for the CSS document.

body {
font-family: Arial, Helvetica, sans-serif;
margin:0px;
padding:0px;
color:#000000;
background:#FF6699;
}

td {
font-family: Arial, Helvetica, sans-serif;
}

th {
font-family: Arial, Helvetica, sans-serif;
}

h1{
color:#FFFFFF;
}

a{
color:#FF6699;
}

a:hover{
color:#FF9999;
text-decoration:overline;
}

a:visited{
color:#CCCCCC;
}

#header{
width:100%;
background:#333333;
height:100px;
color:#FFFFFF;
font-size:30px;
text-align:center;
}

#main{
width:80%;
margin:0px 10%;
background:#FFFFFF;
padding-top:10px;
padding-bottom:10px;
}

#sidebar{
width:19%;
border:#000000 dotted 1px;
float:left;
margin:10px 1%;
padding:1px;
}

div.post{
padding:1px;
margin-top:10px;
margin-left:23%;
border:#000000 1px dotted;
width:75%;
}

#footer{
width:100%;
height:100px;
background:#000000;
padding-top:10px;
text-align:center;
}

Everything that has a ‘#’ in front of it is an id, eg. <div id=”footer”>. If it has a full stop/period it is a class.

If you save the html as a .html file and the CSS as a style.css in the same folder and open it in firefox or some other browser you should get something like I showed you up the top.

Here is the html code with some added text to fill out the spaces.

<body>

<div id="sidebar">
<p>Links</p>

<a href="http://www.google.com.au/">Google</a>

<a href="http://www.awestyproductions.com">AwestyProductions</a>
</p>
</div><!– Close Sidebar –>

<div class="post">
<p>Aliquam lobortis <a href="#">scelerisque nunc.</a> Nullam tincidunt ultricies augue. Sed nec lacus sed diam pulvinar ullamcorper. In et sem nec nisl consequat laoreet. Ut et arcu. Sed quis elit. Quisque neque lectus, tincidunt quis, tempus ut, convallis vitae, tortor. Mauris ultrices, nulla sit amet pharetra convallis, turpis nisl pharetra dolor, vitae blandit ligula felis eu mi. Vivamus fringilla. Sed in ante eget pede ultricies elementum. Duis a nulla et nibh vulputate pharetra. Nam vitae sem quis purus venenatis rhoncus. Suspendisse sed nisi.</p>

<p>Ut eget lectus. Aenean dignissim nunc sed est. <a href="#">Nulla</a> egestas nunc. Nunc sed tellus. Aenean nec libero a orci pretium sollicitudin. Cras congue lacus ut elit laoreet vestibulum. Vivamus interdum urna aliquam augue. Nam accumsan tincidunt sapien. Pellentesque et erat eu est sagittis imperdiet. Nullam lacinia mi ullamcorper mauris.</p>
</div>

<div class="post">
<p>Sed blandit massa a dolor. Cras feugiat interdum nisi. Quisque eu purus ac purus fermentum elementum. Nunc nunc diam, venenatis eget, eleifend quis, tincidunt id, pede. Sed erat. Vivamus fermentum odio tempus lorem. Nunc sit amet urna. Etiam suscipit nibh id orci. Curabitur ut magna. Vivamus vitae lacus ac enim aliquam vulputate. Pellentesque habitant morbi tristique senectus et netus et <a href="#">malesuada</a> fames ac turpis egestas. Ut auctor pharetra tortor. Cras dictum, odio sit amet commodo gravida, erat quam cursus lectus, ac rhoncus dolor est vel lacus.</p>

<p>Ut pellentesque tempus arcu. Curabitur iaculis posuere magna. Duis posuere elit eget dui. Aliquam erat volutpat. Cras in enim. Praesent justo. Cras sed metus. Ut blandit ipsum vel lectus. Quisque viverra dolor sit amet arcu. Praesent facilisis magna vitae urna. Phasellus orci erat, mollis eget, suscipit at, facilisis sit amet, enim. Nulla magna enim, fermentum sit amet, facilisis eget, sollicitudin nec, metus. Nunc scelerisque est nec ipsum. Nullam est.</p>
</div>

<div class="post">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vehicula, mi nec rutrum malesuada, justo libero aliquam nulla, ac aliquam mauris libero eu magna. Aliquam erat volutpat. Nulla eget dolor. Nullam pretium, augue id tempus feugiat, purus ante convallis ligula, vitae tempor tellus eros et turpis. Sed eleifend nunc ut mi. Cras tortor. Duis id lacus. Curabitur sit <a href="#">amet libero.</a> Curabitur dapibus mollis orci. Nulla facilisi. Vivamus pellentesque elit at arcu. Pellentesque tincidunt. Ut viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at ligula eget est hendrerit vulputate. Aenean purus nulla, tempus id, mollis sed, luctus ut, ipsum. Curabitur tristique ante non elit. Vivamus ac sem. Nunc at est. Integer vitae metus.</p>

<p>Pellentesque vitae velit vel neque adipiscing adipiscing. Phasellus vel sapien. Aliquam quis leo sed velit laoreet malesuada. Curabitur consequat ipsum a eros. Nulla facilisi. <a href="#">Vestibulum</a> tellus augue, sagittis in, malesuada in, laoreet eget, metus. Nam facilisis. Curabitur sollicitudin, lectus vehicula consectetuer sollicitudin, pede risus feugiat dolor, lacinia varius libero arcu et nisi. Integer eleifend vestibulum lectus. Morbi congue magna nec lorem. Nullam ut est eu risus sodales placerat. Duis non tellus. Cras adipiscing leo sollicitudin est posuere rutrum. Pellentesque accumsan, elit sed bibendum malesuada, turpis enim euismod justo, ac pulvinar erat felis sit amet eros. Integer adipiscing ultrices eros. Aenean sed libero ut pede luctus molestie. Quisque augue erat, accumsan nec, aliquet vel, sollicitudin sed, libero.</p>
</div>

</div><!– Close Main –>