Forums
This topic is locked
?? Use CSS display:table-xxx to horiz place divs
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?
- 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?