Question

I am trying to make it such that the layout looks like the following (crude) model lol:

–div—————-
|   label TextBox |
|   label TextBox |
|   label TextBox |
|——————- |

Here is what I have …

.personalInfo_Form
{
width:600px;
margin: auto;
padding: 20px;
background-color: White;
}

.addressLabel
{
float: left;
width: 140px;
padding: 5px;
text-align: right;
}

.addressField
{
float: left;
padding: 5px;
}

the end result viewing in FireFox is that the rows are offset and not uniform. I have noticed that specifying a very specific width of the div can change the outcome of position which makes sense because it will enforce the floating rule that items cannot overlap by default, thus positioning them beneath one another… However, I would like to design it such that the width of the Div is not a factor in the positioning of the inner elements.

Cheers for the help!

Answer 1

add clear: both; or clear: left; to your .addressLabel style. You will have to make sure that the div continues on beyond the floated elements by either floating the containing div or providing a clearfix.