How to use CSS display:table-xxx to horizontally position divs

[jqpdev]

I'm trying to move my initial layout that is currently table, tr, td tag
driven. I would like to structure a template that uses div's, but uses
display: table-row, table-cell, table-col to properly position my div's
horizontally. Here is the way I want to structure my template:

- 3 major sections arranged vertically from top to bottom (top, middle,
bottom)
- all three sections have 100% widths
- the middle section is split into two containing divs (left and right)
- left-middle div should take up 20%, the right should claim the remaining
80%
- left-middle div is for menu, right-middle div is for content

The problem I'm having is that div's don't behave the way table cells/rows
do. I have hunch that I could use div's and the above table display
technique. However, I haven't made much progress.

I was told that it can be done without tables... With say something like:

<style>
body { margin: 0 10px; } /* assuming you want 10px left and right margins */
#topsection { width:100%; }
#middlewrapper { position:relative; }
#middleleft { width:20%;float:left; }
#middleright { width:80%; float:right; }
#bottomsection { ... }
</style>

...

<div id="topsection">blah</div>
<div id="middlewrapper">
<div id="middleleft">blah</div>
<div id="middleright">blah</div>
</div>
<div id="bottomsection>blah</div>

However, based on information I found on the web I should be able to use div's but have them displayed with table/row/cell like behavior using the CSS:
- display: table-row
- display: table-col
- display: table-cell

I haven't been successful thus far. I'm using IE v6 SP-1 on Windows XP Pro.
If the information I read is correct this would allow the browser to scale/adjust the
width/height of a div much the way columns and cells are stretched and
shrunk.

Consider this... If I use the left-middle div for a vertical menu and the
right-middle div for page content, and the heights both divs may vary from
page to page, then it is possible for the height of one of the divs to *not*
be visually adjacent to the top of the bottom-div. This gives the page an awkward look
especially if the divs have different background colors.

I'm getting my ideas from W3 Schools on this page
http://www.w3schools.com/css/pr_class_display.asp

and a response to an "a list apart" article. Here is a link to the article.
http://www.alistapart.com/articles/flexiblelayouts/

Here is a link to the specific response I'm referring to.
http://www.alistapart.com/discuss/flexiblelayouts/2/

See the post titled "A table by another name" by Alun David Bestor.

Am I on the right track?

[PunkSktBrdr01]

Actually, you can do this purely with divs and height/width properties:


// CSS

#topsection {
width:100%;
height:auto;
}
#middlewrapper {
width:100%;
height:auto;
}
#middleleft {
width:20%;
height:100%;
float:left;
}
#middleright {
width:80%;
height:auto;
float:right;
}
#bottomsection {
width:100%;
height:auto;
}

[jqpdev]

the section of the css that has float: left and height: 100% doesn't work. I've tried that idea.

I'm using IE v6 SP-1 on XPPRO. So, far I've found that the bottom edges of div's aren't scaled unless one of three conditions are met:

(1) Content within the div pushes it down.

(2) Manually scaled using px, cm, or em measurements.

(3) Client-side scripting is employed to modify the height property.

[jqpdev]

The width property expressed in percentages does work as expected.

[PunkSktBrdr01]

No offense, but IE is a horrible browser, on any system. Hurry over to http://www.mozilla.org and download Mozilla Firebird. Best browser I've ever used. IE is not good with CSS, so it could just be an IE problem. Here's another way to do it, though:


// CSS

#topsection {
width:100%;
height:auto;
}
#middlewrapper {
width:100%;
height:auto;
}
#middleleft {
position:relative;
top:0%;
left:0%;
bottom:100%;
right:20%;
width:auto;
height:auto;
}
#middleright {
position:relative;
top:0%;
left:20%;
bottom:100%;
right:0%;
width:auto;
height:auto;
}
#bottomsection {
width:100%;
height:auto;
}