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
    Jun 2011
    Location
    Phnom Penh, Cambodia
    Posts
    20
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arrow Css Fluid and Fixed layout

    hi

    I want to make two column layout. Can we make css layout with two column with fixed and fluid layout ?

    Code:
    #main {width: 100%; clear: both;}
    
    #colum-left {
    float : left;
    width: 15%;
    padding : 2px;
    margin : 0;
    }
    
    #colum-right {
    float : right;
    width: 83%;
    padding : 0px;
    margin : 0;
    background : #ffffff;
    }
    The problem is when i view in 650px it got too narrow at left side ?

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    I'm not sure what you mean? If you mean you want to set your left column to a fixed size you can do:
    Code:
    width:100px; //will set to 100 always
    
    or
    
    width:15%;
    min-width:100px; //will never be smaller than 100px but will stretch to 15% when able
    Then just take away the width on your column-right, then it will fill the rest of the gap. But for that to happen you first need to set column-right to float:left; Don't float in different directions like that for layouts (some things like headers etc where widths are static is ok). Not only is it yucky but it messes stuff up, especially on mobile devices.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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