Hi - I'm having trouble with a 3 column fluid design. The left and right columns are fixed widths and the centre column expands to fill the remaining space.
This works fine, except that the navigation header is a fixed width - and needs to be visible at all times, otherwise the user won't be able to access some of the site.
If the window width is reduced to less than the navigation block's width, then a horizontal scrollbar appears, which is correct, so that the user can access the rest of the navigation, but the problem is now that any 100% widths refer to the window width, and the navigation is technically greater than this. All of the 100% width elements and the right column just stop at the window width, leaving blank space under the navigation block when you scroll along to the right.
Is there some way to get the true right hand edge of the content, and the true width of the document, so that the elements do fill the area properly?
many thanks for any help,
johnThere's nothing we can do unless we see your code, HTML and CSS, or have a link to the page.sorry - you're quite right, I should have given an example.
there's a basic layout here (<!-- m --><a class="postlink" href="http://www.node4.co.uk/3col/index.html">http://www.node4.co.uk/3col/index.html</a><!-- m -->) which shows the problem.
If the window is reduced to be smaller than the black block's width, and you then scroll to the right, the green right hand column and the footer just stop.
Ideally I want the green right hand column to be aligned to the right of the black block's right edge (ie. to the furthest right it can be), and the footer to fill the whole scrollable area.
Is this possible - any help would be very much appreciated.
the code is:
<body style="margin: 0; padding: 0;">
<div style="background-color: yellow; padding: 0px; margin: 0px; height: 100px; width: 100%;">
header top
<div style="color: white; background-color:black; height:25px; width: 500px; padding:10px;">fixed width block</div>
header bottom
</div>
<div style="float:left; background-color: blue; width: 170px; padding: 12px 10px 10px 10px; margin: 0;">left</div>
<div style="float:right; background-color: green; width: 170px; padding: 12px 10px 10px 10px; margin: 0;">right</div>
<div style="margin:0 170px 0 0; background-color: red; padding: 12px 50px 10px 50px;">middle</div>
<div style="clear:both; height:1px; margin:0; padding:0;"> </div>
<div style="background-color: teal; padding: 0px; margin: 0px; width: 100%;">
footer</div>
</body>Really to make it work, you need to rearrange your markup. You'll want to wrap your whole page in a DIV. Give it a width and a min-width equal to the width of the black bar (beware of the CSS box model and how IE5-Win interprets it wrong). Float and order your three columns (red, blue and green) they way shown in the following article: <!-- m --><a class="postlink" href="http://www.positioniseverything.net/articles/sourceorder.html">http://www.positioniseverything.net/art ... order.html</a><!-- m -->
Here's the downfall. IE-Win doesn't support the min-width property. But it does expand block elements to fit the contents, so the width property in IE-Win acts exactly like the min-width property in standards browsers. Safari and IE5-Mac do not support min-width, nor do they expand block elements like IE-Win does.
In short, design your page to fit in 600x480 screens, or just say @#$% it to screens narrower than 800 pixels.
Your design isn't impossible, but I believe there are too many crappy browsers out there to make such a layout Feasible (IE-Win, IE5-Mac, Safari). You can get it to work in IE-Win, Gecko browsers, and Opera. But nothing else.ok - thanks for the reply. I'll certainly look at that link -
cheers
johnjust wanted to say thanks for the link - unfortunately I couldn't get the ordered column layout to work on a fluid layout.
I did manage to get it working though, it does use an IE expression to compensate for the lack of min-width support, but it seems to be the only way to get the layout to display properly.
Here's the code if anyone is interested:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3 col fluid</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<meta content="no" http-equiv="imagetoolbar" />
<!--[if IE]>
<style type="text/css">
.ExpressYourself {
width: expression(document.body.clientWidth < 501? "500px": "auto");
}
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0;">
<div style="color: white; background-color: #343434; min-width: 500px;">fixed width block
<div style="background-color: yellow; color: gray; padding: 0px; margin: 0px; height: 100px; width: 100%;">
header top
<div style="text-align: center;color: white; background-color:red; width: 500px;margin-left: auto; margin-right: auto;">fixed width block</div>
</div>
<div class="ExpressYourself">
<div style="float: left; width: 140px; background-color: blue;">Left Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test test</div>
<div style="float: right; width: 140px; background-color: teal; color: white;">
Right Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test test
</div>
<div style="position: relative; margin-left: 140px; margin-right: 140px; color: gray; background-color: cyan;">Non-floated Column content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test test
</div>
</div>
<div style="clear: both; background-color: gray; padding: 0px; margin: 0px; width: 100%;">
footer</div>
<div style="text-align: center; background-color:magenta; width: 500px; margin-left: auto; margin-right: auto; color: black;">min-width fixer</div>
</div>
</body>
</html>
This works fine, except that the navigation header is a fixed width - and needs to be visible at all times, otherwise the user won't be able to access some of the site.
If the window width is reduced to less than the navigation block's width, then a horizontal scrollbar appears, which is correct, so that the user can access the rest of the navigation, but the problem is now that any 100% widths refer to the window width, and the navigation is technically greater than this. All of the 100% width elements and the right column just stop at the window width, leaving blank space under the navigation block when you scroll along to the right.
Is there some way to get the true right hand edge of the content, and the true width of the document, so that the elements do fill the area properly?
many thanks for any help,
johnThere's nothing we can do unless we see your code, HTML and CSS, or have a link to the page.sorry - you're quite right, I should have given an example.
there's a basic layout here (<!-- m --><a class="postlink" href="http://www.node4.co.uk/3col/index.html">http://www.node4.co.uk/3col/index.html</a><!-- m -->) which shows the problem.
If the window is reduced to be smaller than the black block's width, and you then scroll to the right, the green right hand column and the footer just stop.
Ideally I want the green right hand column to be aligned to the right of the black block's right edge (ie. to the furthest right it can be), and the footer to fill the whole scrollable area.
Is this possible - any help would be very much appreciated.
the code is:
<body style="margin: 0; padding: 0;">
<div style="background-color: yellow; padding: 0px; margin: 0px; height: 100px; width: 100%;">
header top
<div style="color: white; background-color:black; height:25px; width: 500px; padding:10px;">fixed width block</div>
header bottom
</div>
<div style="float:left; background-color: blue; width: 170px; padding: 12px 10px 10px 10px; margin: 0;">left</div>
<div style="float:right; background-color: green; width: 170px; padding: 12px 10px 10px 10px; margin: 0;">right</div>
<div style="margin:0 170px 0 0; background-color: red; padding: 12px 50px 10px 50px;">middle</div>
<div style="clear:both; height:1px; margin:0; padding:0;"> </div>
<div style="background-color: teal; padding: 0px; margin: 0px; width: 100%;">
footer</div>
</body>Really to make it work, you need to rearrange your markup. You'll want to wrap your whole page in a DIV. Give it a width and a min-width equal to the width of the black bar (beware of the CSS box model and how IE5-Win interprets it wrong). Float and order your three columns (red, blue and green) they way shown in the following article: <!-- m --><a class="postlink" href="http://www.positioniseverything.net/articles/sourceorder.html">http://www.positioniseverything.net/art ... order.html</a><!-- m -->
Here's the downfall. IE-Win doesn't support the min-width property. But it does expand block elements to fit the contents, so the width property in IE-Win acts exactly like the min-width property in standards browsers. Safari and IE5-Mac do not support min-width, nor do they expand block elements like IE-Win does.
In short, design your page to fit in 600x480 screens, or just say @#$% it to screens narrower than 800 pixels.
Your design isn't impossible, but I believe there are too many crappy browsers out there to make such a layout Feasible (IE-Win, IE5-Mac, Safari). You can get it to work in IE-Win, Gecko browsers, and Opera. But nothing else.ok - thanks for the reply. I'll certainly look at that link -
cheers
johnjust wanted to say thanks for the link - unfortunately I couldn't get the ordered column layout to work on a fluid layout.
I did manage to get it working though, it does use an IE expression to compensate for the lack of min-width support, but it seems to be the only way to get the layout to display properly.
Here's the code if anyone is interested:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3 col fluid</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="content-type" />
<meta content="no" http-equiv="imagetoolbar" />
<!--[if IE]>
<style type="text/css">
.ExpressYourself {
width: expression(document.body.clientWidth < 501? "500px": "auto");
}
</style>
<![endif]-->
</head>
<body style="margin: 0; padding: 0;">
<div style="color: white; background-color: #343434; min-width: 500px;">fixed width block
<div style="background-color: yellow; color: gray; padding: 0px; margin: 0px; height: 100px; width: 100%;">
header top
<div style="text-align: center;color: white; background-color:red; width: 500px;margin-left: auto; margin-right: auto;">fixed width block</div>
</div>
<div class="ExpressYourself">
<div style="float: left; width: 140px; background-color: blue;">Left Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test testLeft Float content test test test test</div>
<div style="float: right; width: 140px; background-color: teal; color: white;">
Right Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test test
</div>
<div style="position: relative; margin-left: 140px; margin-right: 140px; color: gray; background-color: cyan;">Non-floated Column content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test testRight Float content test test test test
</div>
</div>
<div style="clear: both; background-color: gray; padding: 0px; margin: 0px; width: 100%;">
footer</div>
<div style="text-align: center; background-color:magenta; width: 500px; margin-left: auto; margin-right: auto; color: black;">min-width fixer</div>
</div>
</body>
</html>