Strange CSS margin problem.

Question

I'm styling a form designed by a client with the following structure:

<div class="formRow">
    <div class="fieldName">
        Email
    </div>
    <div class="fieldInput">
        <input .../>
    </div>
</div>

The width of the form is 500px, but the fieldName div and the fieldInput div stack on top of each other instead of sitting side-by-side. This is because (at least in Chrome and Firefox), the fieldName div is getting a computed right-margin of 340px, taking up the entire width of the form.

I can't seem to override this behavior, either. Entering a margin-right of 10px does nothing. And setting the width of the div either to a hard number or a percentage only changes the inside width, not the strange right-margin.

What CSS headache am I running up against, here?

BTW, here's the CSS:

.formRow{
    padding: 3px 0 3px 0;
    position: relative;
    height: auto;
    width: 100%;
}

.fieldName{
     font-size: 12px;
     margin-left: 10px;
     margin-right: 10px;
     width: 100px;

}

.fieldInput{
     width: 200px;
}

Answer 1

try adding

.fieldName {display: inline}

or

.fieldInput {display: inline}

or both

Answer 2

If you add a display: inline; to each element, that will allow them to sit side-by-side. Because they're rendered as block elements by default, the browser puts them on their own lines.

.fieldName{
    font-size: 12px;
    margin-left: 10px;
    margin-right: 10px;
    width: 100px;
    display: inline;    
}

.fieldInput{
    width: 200px;
    display: inline;
}

Answer 3

One thing to take note of in your example code is that you are over-using DIVs. The same code could be written like this:

<div class="formRow">
    <label class="fieldName">Email</label>
    <input class="fieldInput" .../>
</div>

Or, even better:

<style type="text/css">
    UL, UL LI
    {
        margin: 0px;
        padding: 0px;
     }

    UL LI
    {
        list-style: none;
    }

.fieldName{
        font-size: 12px;
        margin-left: 10px;
        margin-right: 10px;
        width: 100px;

}

.fieldInput{
        width: 200px;
}
</style>

<ul>
    <li><label class="fieldName">Email</label>
        <input class="fieldInput" .../></li>
     ...
</ul>

By using DIV tags for both sections you are violating the semantic meaning of the tag, which is "this section of the page is distinct from this other section." What you really are trying to do is just style your Form label differently from your Input and we already have tags to describe those.