Fixed Navigation Div + Variable Size Content Div?

[gt123]

Hi there,

I'm making a new website and want my vertical navigation bar to have a fixed width, and then to the right of this I want my main content div to have a variable width percentage, with its left edge being immediately right of the navigation div, and the percentage effecting how far the div extends to the right.

If that makes sense, how do I go about that using CSS?

Thanks alot,

GT

[Centauri]

The trouble with mixing fixed and percentage widths is the relationship changes with screen size - the fixed width nav bar might be 50% of the width of a small screen, but only 10% of a large screen, so what percentage do you use for the content container? If you want the content area to fill the rest of the screen, or the overall site to be a % of the screen and centered, then both of these are easy to do, and just involve floating the fixed width container whilst making room for it using margins on the variable width container.

Cheers
Graeme

PS: and welcome to the forums

[gt123]

Ah right, I see what you mean. If it is much simpler to use a fixed navigation and content width, how to I go about centering the containing div within the screen (in IE & Firefox etc)?

[Centauri]

You don't have to use fixed width - if you would like a fluid site, you can simply set a container with either fixed pixel margins (so it strectches with screen), percentage margins or percentage width and auto side margins (to centre it). Inside this, a fixed width navigation bar can be floated, and a content div set to fill remaining space. As the container is fluid (either directly or proportionally) with screen width, the content will also be.

An example of this can be found here (http://garyblue.port5.com/webdev/2col.html). Although this demo uses a fixed width wrapper, a fluid wrapper will work the same way.