Simple website design using CSS

April 14, 2010 at 8:05 pm Leave a comment

ArchitectToday I’d like to address a very simple question: how to rapidly design a website?

The underlying topic we will actually cover concerns the basics of box positioning and floating using CSS 2.1. For those of you who hear a lot about CSS 3, all I can say is that it gives a lot of power to web designers with regards to a website UI and look & feel, but that the CSS 2 box model still rules. It’s important to understand it well.

Again first things first. We need to start with a bit of thinking to determine what our website will look like and how it’ll be organized. What I propose that we build together is quite simple: a header, a vertical navigation bar, a main section for the content and a footer at the bottom. In order to structure the website, we’ll use the div element as a generic container for our different sections. divs can be nested, thus once our basic website structure is drafted it’s easy to add as many other boxes as we want (i.e. widgets, content, …) inside our main containers.

Here is what it’ll look like:

website_template.png

Let’s start with the markup of the website. As you can see it’s quite straightforward. Obviously the div elements are named according to the sketch above thus don’t hesitate to refer to it.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Simple website design using CSS 2.1</title>
	<style type="text/css">
		<!-- CSS rules should be pasted in here -->
	</style>
</head>
<body>
	<div id="pageWrapper">

		<div id="header">my header</div>

		<div id="columnWrapper">
			<div id="nav">
				<ul>
					<li>my navigation menu</li>
				</ul>
			</div>
		</div> <!-- end of the columnWrapper div --> 

		<div id="contentWrapper">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div> <!-- end of the contentWrapper div --> 

		<div id="footer">my footer</div>

	</div> <!-- end of the pageWrapper div -->
</body>
</html>

If you display the page “as is” based on the code above, for sure it will work fine, but it won’t look like the template. Starting at the top of the page each div fully occupies the available horizontal space and is stacked on top of one another in the order in which it appears in the HTML code. To organize them into the desired structure it’s time to work on the CSS rules that will need to be inserted in between the style tags in the head of the HTML file.

I won’t make you wait any longer here is the style part below:

body {
	padding: 40px;
}

#pageWrapper {
	width: 800px;
	margin: 0px auto;
}

#header {
	background-color: #ebf2ac;
	text-align: center;
}

#columnWrapper {
	width: 300px;
	float: left;
	background-color: #f7cfa7;
}

#nav {
	background-color: #ccc;
}

#contentWrapper {
	width: 460px;
	margin-left: 20px;
	padding: 10px;
	float: left;
	background-color: #dcb9e5;
}

#footer {
	clear: both;
	background-color: #aaf4ac;
	text-align: center;
}

The rule on the body element just gives us some space so that our site isn’t glued to the top left of the browser window.

It all really begins with the pageWrapper rules. As you can see the div is given a width. Since it’ll contain floated div children, I usually prefer to manage the web page layout manually by fixing widths. We could use % instead but then resizing the browser window could lead to unexpected or ugly results.

The first interesting thing to note is the auto value of the margin shorthand property for the pageWrapper div. The top and bottom margins are set to 0px while the left and right margins are set to auto.

The margin CSS property can take one, two, three or four values depending on whether the box margins are set all at once, in group (top/bottom and left/right for instance with two values as it is the case here) or separately. It’s called a shorthand property because it defines and replaces in one line the margin-top, margin-right, margin-bottom and margin-left CSS individual properties. For more information about the margin syntax please refer to the CSS 2.1 recommendation.

The auto value automatically adapts the left and right margins of the pageWrapper box with regards to its parent: in this case the body element (i.e. the page). Concretely it centers our pageWrapper container on the screen. This is a very useful tip and the easiest way to center a box horizontally relatively to its parent container.

The columnWrapper rules are also worth explaining because the div is floated to the left.

By default a block element (i.e. a div) fully occupies the horizontal space it has available from its parent (unless it has a width defined, is floated, is fixed or absolutely positioned for instance). This means that any other following box (in the HTML code) appears below it.

A floated box however shrinks horizontally to its width (if defined) or to adjust its content width, thus potentially letting space for other boxes to be rendered next to it (on the left or on the right) instead of below it.

By setting the columnWrapper width and making it float we put it out of the normal content flow (more about this below) and tell the browser that other floated elements can be rendered to its right (since the columnWrapper div floats to the left) provided there is enough space. This is exactly what we do by letting the contentWrapper float as well to the left (we instruct the browser to render both divs side by side).

A much simpler way to explain this is each floated box defines a kind of column and each floated box content appears only in its own column.

There is a useful experiment you can make to better understand floating boxes. Try and remove the float property from the contentWrapper CSS rules and watch the result: the contentWrapper div is now rendered according to the normal flow and thus sits on the left side, appearing as if it has “glided” beneath the columnWrapper (as you can see from the divs background color). If necessary add some dummy text to the contentWrapper div so it has a greater height than the columnWrapper box.

This is what I meant when I said that the columnWrapper wasn’t anymore in the normal content flow when floated. The contentWrapper is positioned as if the columnWrapper doesn’t exist.  However the columnWrapper still impacts the contentWrapper text content which floats to its right. It’s the reason why the contentWrapper div needs as well to declare a float property so that it is rendered properly alongside its left sibling (i.e. columnWrapper). float insures that the contentWrapper div is rendered in its own “column” so to speak.

Also you may have noticed that I’ve set the size of the contentWrapper to 460 pixels while you may have expected 500 (the pageWrapper div is 800px – 300px for the columnWrapper). That’s something to adjust carefully when setting the container dimensions manually. The total width available is actually 500 pixels, but the inner width of the contentWrapper needs to be set to 460 pixels, because it has a margin left of 20px defined and a surrounding padding  of 10px which completes the missing 40px (margin left 20px + padding left 10px + padding right 10px).

Since our content will be placed inside either the columnWrapper or the contentWrapper we won’t really have to worry anymore for inner div dimensions within these containers. Again by default inside boxes will adapt to their parent’s dimensions so we only need to set margins, borders and paddings as required, the browser will calculate inner sizes (width and height) of any inside box appropriately.

Float is a difficult topic and needs as well some tweaking on the footer div by setting a clear property. Setting clear restores the normal content flow rendering and thus insures that the footer div (as a box) is positioned below the highest of the columnWrapper or contentWrapper divs.

Once again you can try to remove the clear property of the footer div and watch the result. Did you expect this one? The footer text complies with the float constraints and thus is displayed where it fits along the floated divs (actually below them because columnWrapper and contentWrapper occupy all the available horizontal space i.e. 800 px). The footer box itself surrounds the text but actually starts below the last box in the normal content flow i.e. the header div.

Another very easy test you can perform is to change left to right for the CSS float property of both the columnWrapper or contentWrapper divs. This reverse the placement of the boxes and now columnWrapper appears on the right hand side instead of the left (some more tweaking could be necessary to nicely adjust the margins and padding).

As I said already float isn’t an easy subject. I suggest you read All About Floats from CSS-Tricks.com for a more complete explanation of how floating  elements impact the layout and rendering of a page.

As usual I’d love to know what you think of this post, whether you find it useful or not? Don’t hesitate to ask questions  in the comments or share with us some of your tricks. I’d be curious to know how you do on your own web sites.

Advertisements

Entry filed under: Web Development. Tags: , .

How to toggle the light on your website? Book review: “Windows 7: the missing manual” by David Pogue

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

Trackback this post  |  Subscribe to the comments via RSS Feed


Calendar

April 2010
M T W T F S S
    Jun »
 1234
567891011
12131415161718
19202122232425
2627282930  

Most Recent Posts


%d bloggers like this: