#1
  1. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2003
    Location
    USA
    Posts
    140
    Rep Power
    12

    Liquid CSS - One header, two columns


    I'm wanting this type of design in my webpage, all centered:


    oooooooooooooooooooooooooooooooooooooo
    oooo------------------------------oooo
    oooo||||||||||||||||||||||||||||||oooo
    oooo------------------------------oooo
    oooooooooooooooooooooooooooooooooooooo
    oooo-----oo-----------------------oooo
    oooo|||||oo|||||||||||||||||||||||oooo
    oooo|||||oo|||||||||||||||||||||||oooo
    oooo|||||oo|||||||||||||||||||||||oooo
    oooo|||||oo|||||||||||||||||||||||oooo
    oooo|||||oo|||||||||||||||||||||||oooo
    oooo-----oo|||||||||||||||||||||||oooo
    ooooooooooo|||||||||||||||||||||||oooo
    ooooooooooo|||||||||||||||||||||||oooo
    ooooooooooo-----------------------oooo
    oooooooooooooooooooooooooooooooooooooo


    o = whitespace
    - and | = boxes

    I can center align top box, but don't know how to get the left box to align its left side with the left side of the header.

    I could do it easily by wrapping a table around the whole thing, but I'm doing my best not to fall back into my sordid addiction with tables.

    Being a CSS novice, what's the best way to align one box to another? Can't see how the "relative" position style helps.
  2. #2
  3. mod_dev_shed
    Devshed Supreme Being (6500+ posts)

    Join Date
    Sep 2002
    Location
    Atlanta, GA
    Posts
    14,817
    Rep Power
    1099
    Wrap the whole thing in a <div> instead of a table. You don't have to do it this way, but I find it easier in the long run.
    Code:
    <div style="float:left;width:80%;left:10%">
      <div id="header" style="clear:left;float:left;width:100%"></div>
      <div id="left" style="clear:left;float:left;width:25%;"></div>
      <div id="right" style="float:left;width:75%;"></div>
    </div>
    # Jeremy

    Explain your problem instead of asking how to do what you decided was the solution.

IMN logo majestic logo threadwatch logo seochat tools logo