I am trying to layout a page in three columns using divs rather than a table. I would like the middle column to have a fluid width, using all of the available space except that required by the two side columns.
Sometimes there won't be enough content in the middle column to fill a single line so I can't depend on it demanding lots of space.
I've tried using float:left for the middle column and float:right for the third column but this results in the third column floating over the right-hand side of the middle column.
Hope someone can help.
Sheila, you will find the answer to a similar question to this on the HTML topic.
you could use relative positioningHow about on the left div:
position:absolute; left:0px. top:0px; width: 100px;
On the right:
position:absolute; right:0px; top:0px; width:100px;
Then the main Div:
margin-left:110px; margin-right:110px;
use margin:0px; on the body tag to remove the marginsi think he wanted a fluid width on the middle one... if you use absolute positioning, it will be a set width. you can find a great tutorial at <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> Just click on "Learn CSS" and then "Try It Yourself!" and you should get a list of all this stuff... find relative positioning. I think that will workYou should not use a DIV because it is a block object, and causes a line break. Use a SPAN instead.
This example creates 3 columns on the same line:<p style="text-align: center"><span style="float: left"><== Previous</span><span style="float: right">Next ==></span>Index</p>Ideally it would be done as...<div style="display: table; width: 100%">
<div style="display: table-cell">
left column
</div>
<div style="display: table-cell">
middle column
</div>
<div style="display: table-cell">
right column
</div>
</div>This would give the exact same rendering as if it were a table with three columns, but without incorrectly marking up your page as tabular data. The downside is that browsers have only fairly recently implemented it so it will only appear correct in the newest browsers. And even worse, apparently enjoying being a pain in the a$$, Microsoft has yet to implement this even in their latest version of IE. But it will render correctly in the latest versions of Netscape and Opera.One important aspect has been omitted. In what order are the blocks? Do you want the first block to end up on the left or do you want the last block to end up on the left? It is important that your page make sense without CSS first and it is important that the meat of the page be found at the top on such occasions. And the same nav menu at the top of every page of a site is a tiresome thing to listen t
k, I think I've worked it out:
<div id="header">Logo and search box</div>
<div id="body">
<div id="side_panel_left">Navigation Links</div>
<div id="main">Content</div>
<div id="side_panel_right">Single column of images</div>
</div>
<div id="footer">Navigation links and copyright info</div>
div#side_panel_left {
float: left;
width: 185px;
}
div#side_panel_right {
float: right;
width: 185px;
}
No float or positioning instructions for the other divs.
This seems to work in IE6 and Navigator 6.2. However, Charles, I would prefer to organise the divs in a more 'listener-friendly' way if possible.
Thanks everyone for your help.hi sheila...
have you tried thenoodleincident?
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
k
EDIT:
although I don't know if it passes the accessibility test
Charles?Thanks Khaki, it's just what I needed and beautifully designed too.Originally posted by Greelmo
i think he wanted a fluid width on the middle one... if you use absolute positioning, it will be a set width.
Greelmo: have you looked at the code? there is no width set on the middle one. The width is set on the two side ones, with the margins of the center one set so they don't overlap. Only the two side ones are absolutely positioned.
dave<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
margin:0em;
padding:0em;
}
div#main {
margin-left:185px;
margin-right:185px;
}
div#side_panel_left {
position:absolute;
top:1em; left:0px;
}
div#side_panel_right {
position:absolute;
top:1em; right:0px;
}
-->
</style>
<title>Example</title>
<div id="header">Logo and search box</div>
<div id="body">
<div id="main">Content</div>
<div id="side_panel_right">Single column of images</div>
<div id="side_panel_left">Navigation Links</div>
</div>
<div id="footer">Navigation links and copyright info</div>Charles, you star!
Your suggestion works almost perfectly.
My only concern is that if the user greatly increases the text size the side columns expand, overlapping the central content column.
I don't want to restrict users to a specific text size but nor do I want them to be inconvenienced by obscured content.
Any fixes anyone?I've attached another variation of Charles' code. This one uses relative widths for the columns, a minor change, and it also has a container DIV that encloses the three columns, header, and footer.
I wrote a style that sets the minimum width of the container DIV to 750 pixels. When the browser window is narrower than 750 pixels, the min-width style kicks in and the relative widths of the columns and header and footer are taken in respect to the minimum width of it's parent. Thus the three columns, header and footer are no narrower than 750 pixels.
For 640 X 480 screen resolutions, side scrolling is required. That's taboo depending on who you ask. But... and it's a BIG but... the min-width style only works on Mozilla 1.0 >, Netscape 7 for sure, NS 6 presumably, Opera 6 and 7 (not sure of 5), and that's it. IE for both PC and Mac does not support it thus far. So, basically design for a 640 X 480 resolution anyhow.
My first successful experiment in designing with DIVs can be seen here: <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/html/">http://www.cm-life.com/pages/newdesign/html/</a><!-- m -->
It floats the three columns left. I'd avoid that design if possible. You'll see a small blank space on the right side of the three columns that has to be there for two reasons:
1. IE5 does not seem to calculate the relative widths of DIVs when the DIV has a parent DIV with padding. It seems to be a little different than the Box model bug that IE has.
2. How browsers calculate and round numbers:
DIV1 width of 20% +
DIV2 width of 60% +
DIV2 width of 20%
==================
100%, but...
Let's take an odd example. There is a viewable width of 707 pixels.
20% of 707 = 141.4 +
60% of 707 = 424.2 +
20% of 707 = 141.4
================
707.2 pixels, just round down you get 707 exactly. Browsers don't measure DIV widths that way. All three DIVs are not related as cells are in a table. The browser will most likely round down in each case above.
141 + 424 + 141 = 706 1 PIXEL LESS THAN THE AVAILABLE SPACE!
The reverse can happen too, where the total widths of all three DIVs are one pixel wider than the available space and then the design falls apart. You get the right-most DIV placed below the left and middle DIVs.
Hope this sheds a little more light on the subject. If this seems like an excessive post, my apologies.The general problem with floats is that they need to be ordered in a particular way (left and right floats come before the main non-floated contents). You can live with that by providing "Skip to contents" link at the top of navigation.
Instead, you may use absolute positionining. The problem with absolute positioning is that the content may run into one-another if the browser width is too small. To avoid that, one may use "min-width", but its not supported by IE6.
A good source for source-ordered floats:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->
Personally, rather than going into all this, I will use what you tried first:
<div id="side_panel_left">
<p class="hide"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#main">Skip to contents</a></p>
...
With p.hide {display: none}
Sometimes there won't be enough content in the middle column to fill a single line so I can't depend on it demanding lots of space.
I've tried using float:left for the middle column and float:right for the third column but this results in the third column floating over the right-hand side of the middle column.
Hope someone can help.
Sheila, you will find the answer to a similar question to this on the HTML topic.you could use relative positioningHow about on the left div: position:absolute; left:0px. top:0px; width: 100px;
On the right:
position:absolute; right:0px; top:0px; width:100px;
Then the main Div:
margin-left:110px; margin-right:110px;
use margin:0px; on the body tag to remove the marginsi think he wanted a fluid width on the middle one... if you use absolute positioning, it will be a set width. you can find a great tutorial at <!-- w --><a class="postlink" href="http://www.w3schools.com">www.w3schools.com</a><!-- w --> Just click on "Learn CSS" and then "Try It Yourself!" and you should get a list of all this stuff... find relative positioning. I think that will workYou should not use a DIV because it is a block object, and causes a line break. Use a SPAN instead.
This example creates 3 columns on the same line:<p style="text-align: center"><span style="float: left"><== Previous</span><span style="float: right">Next ==></span>Index</p>Ideally it would be done as...<div style="display: table; width: 100%">
<div style="display: table-cell">
left column
</div>
<div style="display: table-cell">
middle column
</div>
<div style="display: table-cell">
right column
</div>
</div>This would give the exact same rendering as if it were a table with three columns, but without incorrectly marking up your page as tabular data. The downside is that browsers have only fairly recently implemented it so it will only appear correct in the newest browsers. And even worse, apparently enjoying being a pain in the a$$, Microsoft has yet to implement this even in their latest version of IE. But it will render correctly in the latest versions of Netscape and Opera.One important aspect has been omitted. In what order are the blocks? Do you want the first block to end up on the left or do you want the last block to end up on the left? It is important that your page make sense without CSS first and it is important that the meat of the page be found at the top on such occasions. And the same nav menu at the top of every page of a site is a tiresome thing to listen t
k, I think I've worked it out:<div id="header">Logo and search box</div>
<div id="body">
<div id="side_panel_left">Navigation Links</div>
<div id="main">Content</div>
<div id="side_panel_right">Single column of images</div>
</div>
<div id="footer">Navigation links and copyright info</div>
div#side_panel_left {
float: left;
width: 185px;
}
div#side_panel_right {
float: right;
width: 185px;
}
No float or positioning instructions for the other divs.
This seems to work in IE6 and Navigator 6.2. However, Charles, I would prefer to organise the divs in a more 'listener-friendly' way if possible.
Thanks everyone for your help.hi sheila...
have you tried thenoodleincident?
<!-- m --><a class="postlink" href="http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html">http://www.thenoodleincident.com/tutori ... boxes.html</a><!-- m -->
kEDIT:
although I don't know if it passes the accessibility test
Charles?Thanks Khaki, it's just what I needed and beautifully designed too.
Originally posted by Greelmo i think he wanted a fluid width on the middle one... if you use absolute positioning, it will be a set width.
Greelmo: have you looked at the code? there is no width set on the middle one. The width is set on the two side ones, with the margins of the center one set so they don't overlap. Only the two side ones are absolutely positioned.
dave<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
margin:0em;
padding:0em;
}
div#main {
margin-left:185px;
margin-right:185px;
}
div#side_panel_left {
position:absolute;
top:1em; left:0px;
}
div#side_panel_right {
position:absolute;
top:1em; right:0px;
}
-->
</style>
<title>Example</title>
<div id="header">Logo and search box</div>
<div id="body">
<div id="main">Content</div>
<div id="side_panel_right">Single column of images</div>
<div id="side_panel_left">Navigation Links</div>
</div>
<div id="footer">Navigation links and copyright info</div>Charles, you star!
Your suggestion works almost perfectly. My only concern is that if the user greatly increases the text size the side columns expand, overlapping the central content column.
I don't want to restrict users to a specific text size but nor do I want them to be inconvenienced by obscured content.
Any fixes anyone?I've attached another variation of Charles' code. This one uses relative widths for the columns, a minor change, and it also has a container DIV that encloses the three columns, header, and footer.
I wrote a style that sets the minimum width of the container DIV to 750 pixels. When the browser window is narrower than 750 pixels, the min-width style kicks in and the relative widths of the columns and header and footer are taken in respect to the minimum width of it's parent. Thus the three columns, header and footer are no narrower than 750 pixels.
For 640 X 480 screen resolutions, side scrolling is required. That's taboo depending on who you ask. But... and it's a BIG but... the min-width style only works on Mozilla 1.0 >, Netscape 7 for sure, NS 6 presumably, Opera 6 and 7 (not sure of 5), and that's it. IE for both PC and Mac does not support it thus far. So, basically design for a 640 X 480 resolution anyhow.
My first successful experiment in designing with DIVs can be seen here: <!-- m --><a class="postlink" href="http://www.cm-life.com/pages/newdesign/html/">http://www.cm-life.com/pages/newdesign/html/</a><!-- m -->
It floats the three columns left. I'd avoid that design if possible. You'll see a small blank space on the right side of the three columns that has to be there for two reasons:
1. IE5 does not seem to calculate the relative widths of DIVs when the DIV has a parent DIV with padding. It seems to be a little different than the Box model bug that IE has.
2. How browsers calculate and round numbers:
DIV1 width of 20% +
DIV2 width of 60% +
DIV2 width of 20%
==================
100%, but...
Let's take an odd example. There is a viewable width of 707 pixels.
20% of 707 = 141.4 +
60% of 707 = 424.2 +
20% of 707 = 141.4
================
707.2 pixels, just round down you get 707 exactly. Browsers don't measure DIV widths that way. All three DIVs are not related as cells are in a table. The browser will most likely round down in each case above.
141 + 424 + 141 = 706 1 PIXEL LESS THAN THE AVAILABLE SPACE!
The reverse can happen too, where the total widths of all three DIVs are one pixel wider than the available space and then the design falls apart. You get the right-most DIV placed below the left and middle DIVs.
Hope this sheds a little more light on the subject. If this seems like an excessive post, my apologies.The general problem with floats is that they need to be ordered in a particular way (left and right floats come before the main non-floated contents). You can live with that by providing "Skip to contents" link at the top of navigation.
Instead, you may use absolute positionining. The problem with absolute positioning is that the content may run into one-another if the browser width is too small. To avoid that, one may use "min-width", but its not supported by IE6.
A good source for source-ordered floats:
<!-- m --><a class="postlink" href="http://www.positioniseverything.net/ordered-floats.html">http://www.positioniseverything.net/ordered-floats.html</a><!-- m -->
Personally, rather than going into all this, I will use what you tried first:
<div id="side_panel_left">
<p class="hide"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#main">Skip to contents</a></p>
...
With p.hide {display: none}