Forums

This topic is locked

?? Use CSS display:table-xxx to horiz place divs

Posted 04 Nov 2003 02:13:25
1
has voted
04 Nov 2003 02:13:25 jqp dev posted:
I'm trying to move my initial layout that is currently
<pre id=code><font face=courier size=2 id=code>table, tr, td </font id=code></pre id=code> 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...

***See the attached image for a look a short sample code

****split into two posts****

<img src="file:///c:\html-code.jpg" border=0>

Replies

Replied 04 Nov 2003 02:14:40
04 Nov 2003 02:14:40 jqp dev replied:
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
www.w3schools.com/css/pr_class_display.asp

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

Here is a link to the specific response I'm referring to.
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?

Reply to this topic