PDA

View Full Version : Side by side divs



NeoPuma
Mar 1st, 2008, 02: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
Mar 1st, 2008, 02: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
Mar 1st, 2008, 02: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 :)