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

    order of two column layout

    I'd like my page start with the #nav block on the left with the #content on the right. But, the outcome is that the #content sits on the left hand side of the #nav. Why is that? what can I do?


    This is my css:

    Code:
    #nav {float: left;
    position: fixed;
    text-align: left;
    width: 90px;
    min-height: 100%;
    }
    
    #content {float: left;
    width: 1000px;
    }
    
    
    html, body, wrapper {height: 100%;}

    My html:

    Code:
    <body>
    <div id="nav"> xyz </div>
    <div id="content"> xyz </div>
    </body>

  • #2
    New Coder
    Join Date
    Dec 2012
    Location
    Ingerlund
    Posts
    66
    Thanks
    8
    Thanked 4 Times in 4 Posts
    Surely the float:left is wrong for the content div?

  • #3
    Regular Coder
    Join Date
    Mar 2013
    Posts
    262
    Thanks
    4
    Thanked 67 Times in 67 Posts
    The problem is the fixed position.

    Take out position:fixed from #nav.

    Code:
    #nav {float: left;
    text-align: left;
    width: 90px;
    min-height: 100%;
    }
    And everything should be ok. Fixed positions take the element out of the flow of the document because it's relative to the browser itself. I suggest reading more on the various types of positions to get a better understanding of this.
    My signature :)


  •  

    Posting Permissions

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