2 Column Layout

[jfred1979]

I'm trying to create a simple 2 column layout using two divs. One is a navigation bar, the other the main content. I am floating the navigation div left, which works but since the content div has more text, once it gets to below the point where the navigation div ends, the new lines start at the very left of the screen, destroying the 2 "column" layout. How can I stop this from happening without resorting to absolute positioning (there are other things in the page that rule out the use of absolute positioning)?

[MonkeeSage]

Try setting a height on both divs and make the navbar height the same size as the content height.

Jordan

[mossimo]

You can also set the left margin of the content div to keep it off the navbar.

If your navbar is 150px wide the left margin of main content would be 175px (25px space)

[TheDoctor]

Or, to add to what mossimo suggestted, you could define the width of the nav bar and the contect in percentages.

[synotic]

I was actually just going to post a similar topic!

So far none of the mentioned fixes work for me. My personal problem is that my sidebar is using text for the buttons. Therefore it needs to be resizable. Also however, the box that it's contained in has a border. So this needs to be resized as well. I am trying to create a truly fluid layout. But I am afraid it may not be possible :(

Here's my code:

#menu { float: left; margin-left: 14px; padding: 7px; border: solid 2px #004590 }

#content { border: solid 2px gray; padding: 7px; margin: 0 14px 0 14px; float: left }

The margins and padding are just there for aesthetic reasons. The idea in itself is simple but I don't know if it can be done. Thanks for any help.

[TheDoctor]

Don't float the content, synotic. Just give it a left margin that's larger than the width of the menu (not the same size).

Eg, in your case, with menu having a width of 14px (do you really mean that, or do you mean 14%?)you should set the left margin of the content to 18px (or 18%).

[synotic]

The thing is, my menu is dynamically sized based on the contents... I leave off a width. Therefore that solution doesn't work :(

[synotic]

OK, just minutes after posting this... I just had a flash of inspiration. One word: em. It works beautifully :)

I personally am using pixels for fonts for various reasons though I will offer a text sizing widget. But I though, why not size the menu in ems so that it resizes based on the text? Then I have a width which I can use with the content as a margin. This works perfectly. Well almost, the only minor problem is that the margin between the sidebar and content gets a little big since it keeps getting multiplied when the size is increased but it doesn't bother me that much. But a workaround would be nice... ;)

Here's my end code:

#menu { float: left; margin-left: 14px; padding: 7px; width: 10.9em; border: solid 2px #004590 }

#content { border: solid 2px gray; padding: 7px; margin: 0 14px 0 14.6em }

HTH

[jfred1979]

I've changed the layout to use he left content margin to keep the text from invading the navigation space, but now I can't seem to get them to line up vertically. The content renders below the navigation. Is there a way to make both divs align vertically? What's the "vertical-align" property all about, would it help in this case?

[smitty]

Here's a solution I found for a similar problem. It works well for pages with dynamic content.

I use fixed positioning for the menu divs in browsers that support it, giving the illusion of a column that is the length of the page. I don't use any tiling background images in this, though I suppose you could, they just wouldn't scroll with the rest of your page, like a frame. If you want your menu to scroll, then you don't have to mess with fixed positioning at all. In the browsers that don't support fixed positioning (IE and NS4), I get the height of the content div and set the menu div to that height. I had to add 15 pixels for some reason to get the menu div line up with the content div at the bottom. You may want to execute the menu resizing code on the window.onResize() event, if resizing changes the height of your content div. Wrapper divs sre also necessary to pull this off. Here's some example code:

//stylesheet code
#content {
position: absolute;
top: 1em;
padding-left: 11em;
background:
}
#contentwrapper{
position: absolute;
width: 100%;
right: 0em;
left: 0em;
top: 0em;
}
#menu{
position: fixed;
left: 0em;
top: 0em;
width: 10.5em;
height: 100%;
background: #44b;
}
#menuwrapper{
position: fixed;
left: 0em;
top: 0em;
height: 100%;
width: 10.5em;
}
//end of stylesheet code
------------------------------------------------------------
//html code
<div id="menuwrapper">
<div id="menu">
//menuing code goes here
</div>
</div>
<div id="contentwrapper">
<div id="content">
//loads of content goes here.
</div>
</div>
<script language="javascript" src="menuheight.js">
</script>
//end of html code
------------------------------------------------------------
//this code is in the menuheight.js file
//browsersniff for ie and ns4, only necessary if we're using
//fixed positioning for the menu
iens4 = (navigator.appName!= "Opera" && (document.all¦¦document.layers))? true:false;
//get height of content div
content_height = document.getElementById('content').offsetHeight + 15;
//change height of menu divs to that of content divs
if(iens4) document.write( '\<style\> #menuwrapper, #menu {position: absolute; height:' + content_height + 'px}\</style\>')
//end of javascript code

Postscript: I just tried using the window.onresize event handler to resize the menu div, with bad results (blank page) in ie6. So if you do this, and someone resizes their browser, you should reload the page on resize. This works:

<body onResize="window.location.href = window.location.href;">

If you have a form on the page, this is proably not the best solution as any form information that had been typed in prior to resizing will be lost, but that seems like a rare case.

[jfred1979]

Okay, I've worked out a solution to my problem. I have absolutely positioned the left div (the naviagtion) and then made a large left margin on the right div, similar to what mossimo suggested. Very simple, don't know why I didn't think of it in the first place.