Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.

    •  
      CommentAuthorjskopek
    • CommentTimeApr 22nd 2006 edited
     permalink
    Dear cssBeautyers
    After dropping table layouts (for good, I hope) nearly two years ago I'm stuck a design I can't seem to recreate with pure CSS. I know many of you are MUCH better then me when it comes to CSS so I thought I'd pitch this challenge to you guys.

    I need a 2 column layout with a static column on the left of undefined width and a fluid layout on the right taking the rest of the window's space (with room for a margin, but this can be easily implimented so don't bother). I know most of you are thinking it's simply a matter of applying float:left; to the static div, but it's not that easy. I can't have the right column go 'under' the left column if it turns out to be bigger, but I can't set the height of the left column to a large value because it'll create a nasty scroll bar.

    I was racking my brains over this for a couple of hours yesterday and I eventually decided to just go with a table layout in the interim. Here's how I did it with 4 lines of code

    <table>
    <tr><td valign='top' width='1'><div id="lCol"></td>
    <td valign='top'><div id="rCol"></td></tr>
    </table>

    It was so simple and it worked so well that I'm worried I'm going to ditch CSS again :P
    How do I do this in pure CSS? Is it even possible?
    •  
      CommentAuthornifkin
    • CommentTimeApr 22nd 2006
     permalink
    <div id="leftcol">foo</div>
    <div id="rightcol">bar</div>

    div#leftcol { float:left; width:20%; }
    div#rightcol { margin-left:23%; }
    •  
      CommentAuthorjskopek
    • CommentTimeApr 22nd 2006 edited
     permalink
    margin-left!! Can't believe I didn't think of that :S
    Thanks for the help
Add your comments
    Username Password
  • Format comments as (Help)