/    Sign up×
Community /Pin to ProfileBookmark

Fixed Navigation Div + Variable Size Content Div?

Copy linkTweet thisAlerts:
Jun 08.2007

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

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriJun 09.2007 — 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
Copy linkTweet thisAlerts:
@gt123authorJun 09.2007 — 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)?
Copy linkTweet thisAlerts:
@CentauriJun 09.2007 — You don't [I]have[/I] 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. Although this demo uses a fixed width wrapper, a fluid wrapper will work the same way.
×

Success!

Help @gt123 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...