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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    24
    Thanks
    4
    Thanked 0 Times in 0 Posts

    two column in the center (css)

    I'm trying to make a page layout of two columns with fixed width sitting in the center of the window? The position of each column (and its contents) will not change even though the browser is resized.

    I've found the following code online but don't understand why are the "mask" and "colleft" blocks needed in the css and html? Can I just have the "nav" and content" blocks?

    Please help.


    Code for css:

    Code:
    .mask{
       position: relative;
       overflow: hidden;
       margin: 0px auto;
       width: 1215px;
       background-color: #f4f4f4
    }
    
    .colleft{
       position: relative;
       width: 100%;
       right: 1038px;
       background-color: #f4f4f4
    }
    .content {
       position: relative;
       overflow: hidden;
       float: left;
       width: 1010px;
       left: 1229px;
       height: 500px;
       background-color: #e6e6e6
    }
    .nav {
       position: fixed;
       overflow: hidden;
       float: left;
       width: 149px;
       left: 42px;
       height: 500px;
       background-color: #e6e6e6
    }
    
    body {
       padding: 0px;
       margin: 0px;
       font-size: 90%;
       background-color: #e7e7de
    }


    Code for html


    Code:
    <body>
    <div class="mask">
        <div class="colleft">
            <div class="content">
                right
            </div>
            <div class="nav">
                left
            </div> 
        </div> 
    </div>
    </body>
    </html>
    Last edited by lixiao; 04-29-2013 at 05:09 PM.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    3,760
    Thanks
    23
    Thanked 546 Times in 545 Posts
    I don't know why you need that either. You need a container and both columns inside that. That's it. You do need to set a width and use margin auto.
    Evolution - The non-random survival of random variants.


  •  

    Posting Permissions

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