|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
#1
December 6th, 2003, 06:22 PM
|
|||
|
|||
|
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>   </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
December 7th, 2003, 12:19 AM
|
||||
|
||||
|
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...)
|
|
#3
December 7th, 2003, 05:34 AM
|
|||
|
|||
|
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.
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS: laying out boxes |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
