#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    11
    Rep Power
    0

    CSS: laying out boxes


    I'm trying to do in CSS this:

    Yahoo! mail sign-up

    What I want specifically is to have the grayed out box that is next to the textfields, similar to what the Yahoo! signup page has.

    I have the input fields in a leftCol (div class) container, and the gray box in a rightCol container. Code excerpt:


    Code:
    <div class=row> 
    <div class=leftColBox> 
    <div class=row> 
    <span class=label>E-mail: </span> 
    <span class=field><input type="text"...</span> 
    </div> 
    <div class=row> 
    <span class=label>Re-type E-mail: </span> 
    <span class=field><input type="text"...></span> 
    </div> 
    <div class=rightColBox> 
    &nbsp
    </div> 
    </div>

    Hope thats readable. What the classes do should be self-explanatory, but I'll put in my stylesheets later if necessary.

    I want the height of leftColBox and rightColBox to be the same. The height of leftColBox needs to be automatically defined (simply because some columns may have more stuff), so I can't just put in a static value for both their heights.

    Can someone help me with this?
  2. #2
  3. HTML/CSS/Photoshop maven
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    CA
    Posts
    184
    Rep Power
    12
    Hmm... Yahoo! cheated, as many commercial sites do, and used tables.

    Try this:
    Code:
    <style type="text/css">
    .row {width: X%}
    
    .leftCol {position: relative;
     top: 0px;
     left: 0px}
    
    .rightCol {position: relative;
     top: 0px;
     margin-right: 0px;
     width: 200px}
    </style>
    ...
    <div class="row">
    <div class="leftCol">Blah blah</div>
    <div class="rightCol">Blah blah part II</div>
    </div>
    No guarantees, but this should give you a place to start. It isn't easy to emulate tables with strict XHTML and CSS, but it can be done with lots of experimentation and trial and error. (Wait, aren't those the same thing...)
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    11
    Rep Power
    0
    thats more or less what I had. doesn't work. theres a problem with the main (first) row container's height. it doesn't adjust to fit the leftColBox and rightColBox automatically.

    When I printed a border for the row containers, it showed the main row as a long thin box, with the leftColBox and rightColBox outside of it.... if that comment was understandeable.

    a lil hard for me to explain.

    Edit: nobody can help me with this ??
    Last edited by lunaxy; December 12th, 2003 at 08:45 PM.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Posts
    11
    Rep Power
    0
    help help ??

IMN logo majestic logo threadwatch logo seochat tools logo