Hello and welcome to our community! Is this your first visit?
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Sep 2013
    Thanked 0 Times in 0 Posts

    Absolute positioned navigation bar, good or bad?


    What I want to achieve is:
    - A left column on the left side of the screen with a width of 250px (containing the navigation)
    - The content with a width of 900px shown on the right side of the navigation but in the middle of the remaining space (= full width-250px navigation).

    My solution:
    The left column absolute positioned at (0,0), the body-element having a padding of 250px and the content-div of 900px having margin-left: auto; and margin-right: auto; to center it in the remaining space.

    My question is, is this a good solution and if not in which scenario could it cause problems? I did it with position absolute because I had troubles getting it done otherwise. I imagine it should be something like this, but I can't figure it out:
    <div id="nav">
    <div id="contentContainer">
        <div id="content">
        float: left; 
        width: 250px;
        float: left;
        width: 900px;
        margin: 0 auto;
    But I think this would only work if I set the width of the container to the remaining horizontal space, but that depends on the width of the user's screen.

    Any ideas?

    Gr. Stefan

  2. #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Sydney, Australia
    Thanked 932 Times in 919 Posts
    You haven't catered for the situation where the viewport is less than 1150px wide - which includes all mobile devices and a lot of desktop computers.

    Also unless the text is really large 900px will be too wide for rows of text - people will lose track of which line comes next.

    It is recommended that you don't have columns wider than about 35 to 38em (so the column can be wider if the visitor makes the text bigger).

    On my computer with a 1920px x 1080px resolution screen the browser gets half the width do the viewport only allows for about 850px width. If a page is wider than that I hit the "fit to width" button and reorganise the web page so it fits in that width - which makes a real mess of some pages that are not designed to handle different widths. Most people I know have mobile devices that support widths between 300px and 500px maximum.

    You might read up on responsive design to work out how to have your content adapt to the available width.
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


Posting Permissions

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