SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fixed as well as liquid layout

    q 1

    <div id="wrapper">
    <div id="left">Fixed width of 200px float left </div>
    <div id="content">liquid :- width 100% of the resolution float left next to the left div/div>
    </div>

    how do i achieve this

    q 2

    height of left div to be same as content

    i would like to achieve this by not using absolute in my css is it possible?

  2. #2
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    #wrapper {
        min-width:800px;
        background:#5F7137;/*this colour will be left column colour */
        margin-left:auto;/* centre for compliant browsers*/
        margin-right:auto;
        text-align:left;
        
    }
    #header {
        height:50px;
        background-color: #788A51;
    }
    #left {
        margin-left:-199px;/*must be 1 pixel less than width */
        float:left;
        width:200px;/* this width is the same as the margin on #middle */
        position:relative;
        left:-1px;/* line it up exactly without losing pressure on footer*/
    }
    #left p {padding-left:5px}
    #middle {
        background:#FFFFFF;/* background colour of right column */
        margin-left:200px;/*this is the space for the left column */
    }
    #content{
        width:100&#37;;
        float:left;
        margin-right:-1px;
    }/* contain cleared elements from clearing other floats*/
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  3. #3
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    I got that from a site on CSS layout's a while back... I don't remember the author, but I bet it was Paul O'Brien. If it was you Paul, thanks, otherwise, thanks to the original author...

    I think I covered it all there.
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  4. #4
    SitePoint Addict buildakicker's Avatar
    Join Date
    Jun 2005
    Location
    NorCal
    Posts
    378
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Check out the 2 column layouts down the page a bit on the left...

    http://www.pmob.co.uk/temp/3colfixedtest_4.htm
    SKILEASES.COM - FREE rental listings!
    WILDFIREBLOG.COM - Wildland Fire microblog!

  5. #5
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.


Bookmarks

Posting Permissions

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