www.webdeveloper.com
Results 1 to 4 of 4

Thread: Fixed Navigation Div + Variable Size Content Div?

  1. #1
    Join Date
    Jun 2007
    Posts
    6

    Fixed Navigation Div + Variable Size Content Div?

    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

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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

  3. #3
    Join Date
    Jun 2007
    Posts
    6
    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)?

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    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. Although this demo uses a fixed width wrapper, a fluid wrapper will work the same way.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles