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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centered 2 column layout with fixed width AND percentage width

    I need to create a centered 2 column layout using a combination of fixed width AND percentage width (and also using min and max width for the body or container).

    The body/container min/max width will be 770 to 970 pixels wide.
    The right column is 360 pixels wide.
    The left column should be stretching to fit the remaining width.

    I searched around and found a couple of solutions, but none that approached satisfying all of the above needs.

    Can anyone help?

  • #2
    New Coder zfred09's Avatar
    Join Date
    Dec 2006
    Posts
    69
    Thanks
    0
    Thanked 5 Times in 5 Posts
    Try making a container with your set width, 770px or 970px, then set the width on the right column and float it right, then use width: 100% and float the left column left. See if that works.

  • #3
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I could tell you that wont work without even trying it.
    What you will get is one column 100% width of the wrapper and another column, floated right, forced underneath it.

  • #4
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the css I am currently using.

    bandMain is the wrapper.

    body { margin: 0 auto; padding: 0; background: #ccc;}

    #bandMain * { margin: 0; padding: 0; text-align: left; list-style-type: none;}

    #bandMain { display: inline-block; font-family: Helvetica, Arial, sans-serif; margin:0; padding: 10px 0 0 0; min-width: 770px; max-width: 970px; background: #fff; min-height: 450px; text-align: left; border: dashed 2px #ccc; }

    #leftChunk {
    float: left;
    padding: 30px;
    width: 45%;
    }

    #rightChunk {
    position: relative;
    background: #fff;
    display: inline-block;
    float : left;
    padding : 15px 10px 15px 10px;
    width : 360px;
    border : 1px solid #ccc;
    margin: 10px 10px 40px 10px;
    font-size: 12px;
    line-height: 14px;
    }


  •  

    Posting Permissions

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