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
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/pr_class_display.asp">http://www.w3schools.com/css/pr_class_display.asp</a><!-- m -->
and a response to an "a list apart" article. Here is a link to the article.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/flexiblelayouts/">http://www.alistapart.com/articles/flexiblelayouts/</a><!-- m -->
Here is a link to the specific response I'm referring to.
<!-- m --><a class="postlink" href="http://www.alistapart.com/discuss/flexiblelayouts/2/">http://www.alistapart.com/discuss/flexiblelayouts/2/</a><!-- m -->
See the post titled "A table by another name" by Alun David Bestor.
Am I on the right track?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;
}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.The width property expressed in percentages does work as expected.No offense, but IE is a horrible browser, on any system. Hurry over to <!-- m --><a class="postlink" href="http://www.mozilla.org">http://www.mozilla.org</a><!-- m --> 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;
}
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
<!-- m --><a class="postlink" href="http://www.w3schools.com/css/pr_class_display.asp">http://www.w3schools.com/css/pr_class_display.asp</a><!-- m -->
and a response to an "a list apart" article. Here is a link to the article.
<!-- m --><a class="postlink" href="http://www.alistapart.com/articles/flexiblelayouts/">http://www.alistapart.com/articles/flexiblelayouts/</a><!-- m -->
Here is a link to the specific response I'm referring to.
<!-- m --><a class="postlink" href="http://www.alistapart.com/discuss/flexiblelayouts/2/">http://www.alistapart.com/discuss/flexiblelayouts/2/</a><!-- m -->
See the post titled "A table by another name" by Alun David Bestor.
Am I on the right track?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;
}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.The width property expressed in percentages does work as expected.No offense, but IE is a horrible browser, on any system. Hurry over to <!-- m --><a class="postlink" href="http://www.mozilla.org">http://www.mozilla.org</a><!-- m --> 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;
}