Order of DIVs in the Code

[JojoTilly]

A simple question for beginners here:

Lets say you're working with a very basic CSS layout in Dreamweaver, and you have five basic divs:

HEADER
LEFT SIDE
RIGHT SIDE
CENTER CONTENT
FOOTER

For SEO purposes, my goal is to get the html code to go Header > Main Content > Left Side > Right Side > Footer

but instead it goes Header > Left Side > Right Side > Main Content > Footer

How does one control how the code flows from top to bottom?

This is very noobish introductory topic, but if someone can point beginners in the right direction, it would be much appreciated!

[JojoTilly]

Here's a better way of saying it:

Im looking for a 3 column layout wheere the middl content goes first - 2-1-3.

[SuzyUK]

One answer would be to use floats, it could be done using absolute positioning but that causes problems with getting footer to stay at bottom, or adding background effets becasue they won't stretch

I have a template, with basic code attached, out there in the wild - search for "Flexi Floats" for the pretty version

However, it is unlikely Dreamweaver will cope with the display of it, unless it's changed it presentation of Advanced CSS Layouts :o

<div id="contentfloatholder">

<div id="centerwrap">
<div id="center">
<h3>Center content</h3>
</div>
</div>

<div id="right">
<h3>Right Content</h3>
</div>

<div id="left">
<h3>Left Content</h3>
</div>

</div>

The idea is that you wrap the main content in a div (#centerwrap) then float that div giving it a 100% negative margin (actually <100% is better with the first following float adjusting for the difference, in my example I use 95% and 5%.. that's because in practice some browsers won't display if they think the div is 100% not there ;) however I'll use the theory and not the practice to explain..) -

The idea of using 100% negative margin on the content wrap is that anything following it will float into its space (or over the top of it if you like)

Then inside that div you put your actual main content div and margin it from the left and right as per your requirements for sidebars. What you have now is a floated div containing the content with whitespace at either side. (or you could actually have two right sidebars, two left sidebars, or as many sidebars as you like..)

Then outside the floated wrapper you put your left and right columns and simply float them left or right as required, because they are then floating into the same space as the floated content wrapper they will appear over the top of it and you will want them to float to where your whitespace created by content margins are.

You then wrap the whole lot of this in another wrapper (fully floated too) which aside from being useful to add any background images, faux column effects, acts as a container/float clearer for all the child floats i.e. it will stretch to fit whichever is the longest column

then you simply put your footer below that master wrapper so it always appears after the longest column

and you said it was simple question ;)

This layout template is very stable x-browser, virtually hack-free with the only little tweaks being for IE/mac and NN6 as it was built when they were still around, and it is in use on a few heavy usage sites, it's even been incorporated in some WordPress and Drupal themes!

-Suzy

[JojoTilly]

Suzy,

Thank you for your extensive response! You are wonderful.

Do you mind mentioning which high usage sites use this?

-Jojo