HowTo: Develop a Web Page Using CSS Style Sheets.
Tutorial 2: two-column layout with CSS
Introduction: Consider a page like that containing Tutorial 2a. For any number of reasons you want to replace the central container of information, below the cross-page green bar, with two columns of information. We set the scene with parameters from the previous Tutorial so we are actually working on building the web page that you are viewing. The <div> to be replaced was called "column" and more to the point it was 741px wide in the minds of sane browsers and 750px in the mind of IE6. Obviously one can now create an arithmetic nightmare by proceeding quickly.
Method: The method is to put one <div> floating right and another <div> floating left so their rendered boxes sit hard against the right and left respective edges of the <div> that contains both of them. Let's be original and call them "col-right" and "col-left". The easiest thing to avoid late nights on a calculator is to deliberately avoid defining any padding or margins left or right of each of the new columns first up, so they render identically in Mozilla/Firefox and IE6 and see what result you get with fingers crossed. So long as their combined widths are less than the width available in the containing <div> [741px or 750px?] they will sit nicely side by side with a gap between them [I actually use this gap as a nice, clutter-free visual separator]. To avoid the issue of "how many pixels?" I use percentages on the first attempt.
#col-right {float: right; width: 74.5%; padding-bottom: 5px; margin: 0px;}
#col-left {float: left; width: 24%; padding: 0px; margin: 0px;}
.clearfloat {height: 0; clear: both;}
HTML
<div id="col-right">
the content of the right column goes here [including the flashy green bar at the top]
</div>
<div id="col-left">
the content of the left column goes here [including the flashy green bar at the top]
</div>
<div class="clearfloat"></div>
That worked a treat and gives the result that you see as this page. It views exactly the same in IE6 as in compliant browsers. Naturally I didn't arrive at this method first go!
Clearing floats: With respect to CSS: ".clearfloat {height: 0; clear: both;}" and HTML: "<div class="clearfloat"></div>" in the box above, this is called "clearing floats". Just put "clear float" in Google and you'll discover all about it, e.g. position is everything has a nice expose while the maxdesign site has a very thorough tutorial on the subject.
In the present case, zero height makes the effect invisible and infinitely small. "Clear: both;" prevents anything from existing in the same container at the same level on the page as "clearfloat".
Here's what happens if clearfloat is not added just under the left and right columns: The footer moves up the page to sit under the top banner. Why is this? Because all the other <div>s within the same container as the footer, including col-left and col-right contain float-left or float-right. If a <div> contains a float it is removed from the normal flow inside the containing <div> and into the flow sequence of the floating <div>s. So footer moves up to position as next in line in the "normal" or "non-floating" elements.
Just to finish up the discussion of clearing floats, the small graphic left-under the banner floats left. It has a "clear: both;" declaration in the next element/<div> in line after it to prevent that <div> from moving up into the space beside and to the right of the graphic.
Well that's all for this one folks.
Links to more Great Webmaster Tools.
I use and recommend these too. Once again, all are quality and all are free. [For my earlier recommendations, click here]
GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages. It is quite simply the pinnacle towards which all proprietary imaging programs strive. Photoshop[compare the costs!] eat your heart out.
"Quanta Plus is a highly stable and feature rich web development environment. The vision with Quanta has always been to start with the best architectural foundations, design for efficient and natural use and enable maximal user extensibility. Quanta Plus is very much targetted at one objective. That is to be clearly and obviously the most productive, powerful and efficient web development environment in the world."
Is that naked ambition? Well Quanta+ really impresses me! I type away blithely & it corrects or highlights my errors, arranges my DTD and formats appropriately, prompts for meta tags, fills in end tags on elements and so on. W3C validation of Quanta+ XHTML pages is a minor chore. I dreaded writing XHTML until I found Q+. With Q+ it just seemed to fall into place. I rarely use a WYSIWYG (X)HTML editor now - they're so limiting.
Cheers, Swerdna.
