PDA

View Full Version : Side by side divs


NeoPuma
03-01-2008, 01:27 PM
Hey
I'm trying to create two divs next to each other for a form. I use the following 3 classes:
.field_set {
width: 640px
}
.field_name {
width: 150px;
float: left;
}
.field_box {
width: 640px;
}
The field set would group the name and the actual field together (if that makes sense).

To put these into action, I use the following code, which works fine in Firefox, but doesn't work in Internet Explorer.
<div class="field_set">
<div class="field_name">EMail Address: <span class="required">*</span></div>
<div class="field_box">
<input type="text" name="user_email" value="" size="50"/>
</div>
</div><br/>

In Firefox, the are next to each other, but in Internet Explorer, it seems to always want to put them underneath each other.

The live version can be seen here (http://babybloom.neopian.co.uk/?p=user&a=register)

If any one knows how to fix this IE problem, please help me!

Thanks

P.s. sorry for the newbie question, but this really isn't my strong point.

abduraooft
03-01-2008, 01:36 PM
How do you expect 640+150=640 ?
No need to give width for .field_box
BTW, the more semantic and easy way would be something like
<style type="text/css">
div.row{
clear:both;
}
div.row label{
float:left;
width:150px;
margin-right:5px;
}
label em{
text-decoration:none;
color:red;
}
div.row input.text{
width:/*a suitable value */
}
</style>
<div class="row">
<label for="user_email">EMail Address: <em>*</em></label>
<input type="text" class="text" id="user_email" name="user_email" value="" size="50"/>
</div>

NeoPuma
03-01-2008, 01:42 PM
Your a genius lol.
I'm quite new to all CSS and things, it's not something I use often so I'm still exploring possibilities. I tried using a way I knew and tried to adapt, but obviously didn't work.
I can see how you did yours and it makes sense now.

Thanks :)