2 column layout, with a twist

**webchick** · Sep 28, 2004 13:54

I'm trying to make a *very* simple layout:

Code:

<div id="page">
  <div id="menu">
  <!-- menu -->
  </div>
  <div id="content">
  <!-- content -->
  </div>
</div>

#page
+--------+----------------------------+
| #menu  | #content                   |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
|        |                            |
+--------+----------------------------+

#menu should be hard-coded at 150px.
#content should auto-stretch to take up the rest of the screen.

The twist?

#menu is secondary navigation that may or may not be on any given page. When it's *not* on a page, I'd like for the content area to stretch and take up the entire screen, thusly:

Code:

<div id="page">
  <div id="content">
  <!-- content -->
  </div>
</div>

#page
+-------------------------------------+
| #content                            |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
|                                     |
+-------------------------------------+

I initially thought, "Simple! I'll just float both columns left!" which works beautifully in Internet Explorer, but falls flat on its face with Firefox/Opera (the menu always appears *above* the content).

All solutions I've seen either have you hard-coding the width of both the menu and the content area (either in percentages or in pixels), or hard-coding the size of the lefthand margin. When the menu is missing, this either causes a big gap to appear where the menu used to be, or causes the content to be shrunk down to its normal size on the page, rather than stretching to the screen width.

Hoping I'm missing something stupid... thanks in advance for any help.

**Paul O'B** · Sep 28, 2004 16:31

Hi,

Well I'd probably do something like this but it may not be what you want

On the pages where the menu is removed set an id in the body tag.

Code:

<body id="nomenu">

Then you can address the left margin of content like this.

Code:

#content {margin-left:150px}/*normal pages get this*/
#menu {width:150px;float:left}/*normal pages get this*/
body#nomenu #content {margin-left:0}/* nomenu pages get this*/
body#nomenu #menu{display:none}/*nomenu pages get this*/

I hope thats the sort of thing you were looking for

Paul

**maxor** · Sep 28, 2004 17:11

Originally Posted by webchick

I initially thought, "Simple! I'll just float both columns left!" which works beautifully in Internet Explorer, but falls flat on its face with Firefox/Opera (the menu always appears *above* the content).

Well technically it looks how it's supposed to in Firefox and Opera, but because of IE's incorrect box model the two floats seem smaller than they really are (according to the correct box model) and that's why they 'fit' in IE and not in Firefox.

I assume you're developing in IE and then checking everything in Firefox and other browsers? It's probably a better idea to test in Firefox, or some standards compliant browser, and then test in IE and make any necessary hacks/changes.

**Paul O'B** · Sep 29, 2004 02:23

Originally Posted by maxor

Well technically it looks how it's supposed to in Firefox and Opera, but because of IE's incorrect box model the two floats seem smaller than they really are (according to the correct box model) and that's why they 'fit' in IE and not in Firefox.

I think its more a case of floating the content without a width that stops the layout working in firefox

. The float then takes up 100% and won't fit alongside something else. Floats should always have widths unless they are replaced elements such as images where they have intrinsic width.

Paul

Edit:

lol - I'm talking rubbish again

It seems that if you float the content next to the left float it will in fact float alongside but it won't stretch to the whole 100% but collapse to content width when there is no specified width. However when there is enough content to take up the whole line then mozilla will keep expanding to 100%and drop the float below but ie will wrap and stay alongside the float.

Code:

<!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">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
#left {float:left;width:150px;height:200px;background:red}
#right {float:left;background:blue;}
</style>
</head>
<body>
<div id="left">Left</div>
<div id="right">Right</div>
</body>
</html>

Obviously you could use this method to put content alongside the left column but you couldn't have a full width background on the content as it will shrinkwrap to the content.

**webchick** · Sep 29, 2004 04:31

Thanks a lot, Paul! You're right that that's not quite the solution I was hoping for, but it should work well nonetheless. When these pages are dynamically generated I'll just add the id attribute to the <body> tag on those without the menu.

Originally Posted by maxor

I assume you're developing in IE and then checking everything in Firefox and other browsers?

Actually, the opposite is true...

But I thought I was going crazy because I have used float: left; on layouts like this before, and couldn't figure out for the life of me why it wasn't working this time. I guess I had always specified a width for both columns in the past.

Originally Posted by Paul O'B

It seems that if you float the content next to the left float it will in fact float alongside but it won't stretch to the whole 100% but collapse to content width when there is no specified width. However when there is enough content to take up the whole line then mozilla will keep expanding to 100%and drop the float below but ie will wrap and stay alongside the float.

Very interesting! Yeah, when I replace 3 paragraphs of "Lorem ipsum..." with "Insert content here" it works beautifully! ;P Thanks again for the help!

User Tag List

Thread: 2 column layout, with a twist

Thread Tools

Display

2 column layout, with a twist

Thanks!

Bookmarks

Bookmarks

Posting Permissions