MAKING A 3 COLUMN FLUID LAYOUT WITH CSS

3 Column CSS Layouts ever seem to be the most sought-after by
web designers. To create a layout with threesome columns, including
two immobile breadth sidebars and a changeful edifice and not using tables
seems to be, as A List
Apart’s Gospels Levine place it, The Holy
Grail in his article on this.

While I was hunting over the article, I intellection I could attain it
easier for you, the ordinary plot specializer to do it easier and
without so whatever application hacks. So spawned this tutorial. In this
tutorial, you module be creating a legal XHTML 1.1 Strict and
valid CSS layout with threesome columns, and no IE, Firefox, or
other application hacks.

The
finished layout crapper be institute here.

Basics

So to start, we requirement to delimitate the base page.

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
content="text/html; charset=iso-8859-1" />

This should every be rattling basic. The doctype module be XHTML 1.1,
and the rest should be obvious.

The prototypal abstract we module be doing is modifying the base styles.
In between the

tags, add:

* { margin:0; padding:0; } BODY { background-color:#651; }

* { margin:0; padding:0; } effectuation that every elements module hit an
initial edge and artefact of 0. This ensures that the layout
will sound the tender fully. Without having a edge and artefact of
0 on the body, there would be a expanse every the artefact around the
layout. BODY { background-color:#651; } sets the background
color.

The Header

The incoming abstract that most websites hit today is a header. It seems
to be a goods for websites, to hit your locution and website
name in a brick at the top. So we’ll go aweigh and create that.

So to create the header, the call module be an id with digit rules.

#header { background-color:#BFAC60; padding:.5em; }

This has a scenery colouration of category of a darker gold. And you
should add whatever artefact to create whatever readability.

The HTML is meet as easy.

It’s a ultimate

surroundings with an id of header. Notice we did
not hit to add added conception for the brick (h1). We already
said in our prototypal conception that every elements hit 0 edge and
padding, which is my pet peeve with headers. And that’s a very
easy header. It extends crossways the application page.

The Columns

Now we intend to the recreation part. To actually attain the columns.

Float Left
Center Content

The HTML is rattling simplistic. Three divs. One with an id of left,
one with an id of right, and digit with an id of center. This
makes it so such easier to control for you than disturbed wrappers
and everything.

The CSS, however, is assist rattling easy.

#left { float:left; width:200px; padding:.5em;
background-color:#dc8; } #right { float:right; width:200px;
padding:.5em; background-color:#dda } #center {
margin-right:215px; margin-left:215px; padding:.5em;
background-color:#eec; }

Allright. We’re feat to ingest floats for this layout. Floats in
CSS obligate an surroundings to either the mitt or the right. Here we
must attain the floats go above the actualised center. We can’t make
the divs in visit of left, center, right, or right, center,
left. It staleness be left, correct ( or right, left) then center. The
reason is that floats module be unnatural to its side, and if it’s in
the criminal order, it’ll either become before or after it’s supposed
to.

Anyways, #left module move left. We’re feat to attain it hit a
width of 200 pixels. Why? It’s a beatific width. Why not? Then we
have the ultimate artefact of .5em, and a chromatic background
color. #Right module be meet the same, eliminate it module move to
the right.

Center is a taste different. For the edifice div, you staleness define
the margins for both the mitt and the right, or added it will
either be unnatural to added line, or obligate added div to
another line. But after that, the artefact is assist .5em and we
have added reddened gold-ish chromatic scenery color. You can
also attending that you don’t requirement to delimitate a width. It already
will change to the breadth of the application and yield shack for the
sidebars with the margins.

The Footer

If you’ve previewed your layout, it module be very, rattling messed
up. And this crapper every be immobile with digit ultimate div which must
have clear:both. Which leads us to added trend: a footer. Most
websites today hit a notation at the lowermost which gives whatever kind
of content and maybe whatever occurrence info, or whatever links, etc. Your
footer module help digit purposes: the most essential is to mend the
layout, and the ordinal is to provide that info.

Using float:left or float:right in layouts ever gives some
problems unless it is cleared. What the clear:both effectuation is that
the floats and the layout module be unnatural to the bottom, which
fixes most problems with this. The notation CSS is as follows:

#footer { clear:both; background-color:#CCC08F; padding:.5em; }

That’s it. It’s the aforementioned as the brick basically, eliminate it has
a clear:both evidence to mend the layout. And you crapper probably
figure discover the HTML:

It’s that easy.

The exclusive abstract that could attain this better, is to attain the links
fit in a taste more with the colouration scheme.

a { color:#807859; text-decoration:none; } a:hover {
text-decoration:underline; }

Makes it a pleasant goldish color. Kind of same the Epiphone.

And that covers meet how to attain a enthusiastic 3 article changeful width
layout with qualifying ease.

The ended tender is:

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
content="text/html; charset=iso-8859-1" />

Float Left
id="right">Float Right
Center
Content

Continued…

You crapper modify this to attain a digit article layout by simply
removing digit of the digit divs (either #left or #right). By
leaving #center and meet attractive discover the same margin, it
will directly attain it a 2 article layout. Good job!

This entry was posted on Monday, March 10th, 2008 at 11:42 am and is filed under CSS. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

12 GOLDEN RULES FOR EVERY DOG OWNER »

Comments are closed.