Zugg Software :: View Entry

Posted: Wed Sep 14, 2005 2:37 am

OK, since I didn't have any takers on my last CSS challenge, here is another one. This one should be easy Twisted Evil

The challenge is to make a simple two-column layout with BOTH a header AND footer that span the entire width of the window. The left column is the menu column and should have a fixed width of 200 pixels. Yes, that's right, a FIXED WIDTH. No fair using with percentages. Imagine that the background image of this left panel has a fixed width that leads to this requirement. Of course, the main content column should resize as the browser window is resized.

Now, either the left menu OR the main content window can be the longest column. In other words, even if the content is smaller than the menu size, the footer should display after the entire menu (and not just at the bottom of the main column).

And if the main column has a lot of content, it should stay in a column and NOT wrap back to the left margin when it gets past the left menu.

It must work in both IE and Firefox.

Here is an example of exactly what I want, except this example uses tables: Layout Example

Now, here is what I have tried and failed:

Putting both columns into their own DIV, then a wrapping DIV. Set the outer DIV to position:relative and then use position:absolute in the columns to move the content over to left:200px. This almost works, but the footer at the bottom only gets displayed under the main content column and doesn't span the entire width of the screen. In some cases when playing with this, the footer gets overlayed right under the header and overlapped by both columns. I can't seem to get the footer to move to the bottom of the longest column.
I tried setting both columns to float:left. Works on IE, but not Firefox, because CSS compliant browsers like Firefox REQUIRE a width for each DIV. Setting width:auto doesn't work in Firefox. You can set a fixed width for the content, like 600px and it works, but if you make the width too large, the main content DIV gets displayed AFTER the entire left column, which is horrible. The only way to make Firefox happy is to use percentages for BOTH columns (like 20% and 80%), but this defeats the requirement of a fixed width for the left column.
Same as above, but only make the Left column float, and leave the main column alone. Problem is that then the content of the main column wraps back to the left margin when it gets longer than the menu.

I've looked a *many* online example pages, and they are all very tricky and avoid the problems I'm having. Either they use percentages for the column width, or they only have a header and no footer.

I'd be really happy if someone could point me to a site that shows a CSS example that actually works the way I need it to.

Once again, I'm really TIRED of having to confirm my design to what CSS allows, rather than what I WANT TO DO! Especially when a TABLE layout performs what I need so easily.

Seems like yet another example where both CSS and the browser support falls very short of what is needed. I'm guessing that it will be years before we have both a good CSS standard and good browser support and can start using all of this cool stuff.

Till then, I guess I'll still stick with tables. Unless someone can find a good solution for me. Good luck! I've got a bruise on my forehead from pounding it against the screen all night and a sore throat from cursing various browsers.

Apprentice Joined: 10 Feb 2005 Posts: 158

Have you tried to modify the templates from BlueRobot? Good stuff. I bet you could use his first example (2 column with left menu). The example, which seems to fit your above criteria, has a header but no footer. I have not messed with CSS in awile but I would think adding a footer would not be too difficult.

http://www.bluerobot.com/web/layouts/

GURU Joined: 24 Sep 2000 Posts: 1237 Location: USA

One caveat: you didn't specify that the border around the left column has to reach the bottom of the page, so I didn't bother. If you wanted to do that, you could use a faux page background image that has a single colored pixel 202pixels in from the left, and it would look like a column border from top to bottom. Borders disregarded, this works.

<html>
<head>
<style>
#header,#footer{width:100%;background:#ccc;color:#000;text-align:center}
#footer{clear:both}
#sidebar,#content{border:dashed 1px #ccc;margin:2px}
#content{margin-left:208px}
#sidebar{width:200px;float:left}
</style>
</head>
<body>
<div id="header">header</div>
<div id="sidebar">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla</div>

<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla<br/><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla<br/><br/>
</div>
<div id="footer">footer</div>
</body>
</html>

Posted: Wed Sep 14, 2005 4:57 pm

Thanks Darker! It was the margin-left property that I was missing. For some reason I thought the margin would get added between the right-edge of the floating sidebar and the left-edge of the content box. So I guess when something is floating, it gets treated like it's not really there when applying margins? I guess that makes sense.

I figured that something this simple *had* to be possible. I still have a lot to learn about all of this.

Maelstrom, I looked at the stuff at BlueRobot already and no, it doesn't handle a footer. It uses the position:absolute method that I mentioned above and doesn't put footers in the correct place. As I mentioned, a *lot* of sites ignore this footer problem. Darker's float:left method with the margin looks like the correct way to do it.