I thought I would post some info on how to make a “fluid” design. This can be used as a base for the design, and then you can tweak it how you want. First of all, lets see an example of what we are going to be creating:

http://www.mywebsitedesignersblog.com/examples/3-col-fluid.html

As you can see, I’ve added background colors to the page, so you can see the different “blocks” Obviously you can remove those.

The main thing to take into consideration with a “fluid” design, is that you need to have margin: auto set..i.e:

#wrapper {
	width: 850px;
	margin: auto;
}

You can change the width of this to whatever you want(800px, 1000px, or whatever) and it will automatically align the left/right margins into the center of the page.

Now you have the “wrapper” in place, we can setup the other blocks. The header/footer are the same (100% width), but I’ve done them as seperate div’s so that you can assign different classes/font styles etc that are different for each of them. For example:

#header {
	width: 100%;
	font-size: 14px;
}
#header: a:link, #header: a:visited {
	color: green;
	text-decoration: none;
}
#header: a:hover {
	color: red;
	text-decoration: underlin;
}

#footer {
	width: 100%;
	font-size: 11px;
	color: orange;
}

Hopefully that gives you an idea

If you wanna just get rid of one of the columns, you can simply remove the div from the page… for example, you would remove this to get rid of the left column:

#left_col {
....
}

..and then this part in the HTML:

		<div id="left_col">
			left column
		</div>

If you remove one of the columns, you need to be sure to update the width: xx% parts for the remaining middle_col and right_col (or left_col , depending on which one you removed). They need to add up to 100%. With the main example I showed you we have:

Left Col: 20%
Middle Col: 80%
Right Col: 20%

BE AWARE: If you add borders/padding to those divs, you may find it better to set the width of those in px (instead of %), cos the borders add extra pixels (and may cause your design to “drop” down below the main design!)

I hope that has been of some help (I know it took me a while to get used to fluid CSS designs, but its pretty simple once you know how )

Enjoy!

Andy

I’ve been working as a Web-Design / Coder for many years now, and thought it was finally time for me to give back some of the stuff I’ve learned over the years. I started this blog in November 2010, and have already added quite a few varying articles to the site. I’m always looking for new suggestions, so please visit the forum, or shoot me an email with suggestions!

Website – More Posts

Categories: CSS • HTML / XHTML coding

Tags: css, fluid design, xhtml