Question

I have a site that I’m creating, part in static HTML, the other part is served via Django. Since I want the look and feel to remain the same (who doesn’t?) I have used CSS for the static site. That same CSS I have included (almost successfully) in the dynamic site.

When I create a form, I can get a very nice two column listing on the static side

Label  Input
Label  Input
Label  Input

But, when I do the same code on the dynamic side, it’s not so nice

Label  Input
       Label  Input
              Label  Input

The CSS I’m using is:

form.login label.fixedwidth {
   display: block;
   width: 240px;
   float: left;
}

\.
Sorry, here’s my form:

     <form action="" method="post" class="login">
        <fieldset>
           <div>
              <label for="username" class="fixedwidth">User name:</label>
              <input type="text" name="username" value="" id="username">
           </div>
           <div>
              <label for="password" class="fixedwidth">Password:</label>
              <input type="password" name="password" value="" id="password">
           </div>
           <input type="submit" value="login" /> 
        </fieldset>
     </form>

[edit]
So, I noticed that my two ‘input type’ lines didn’t close the tag (no ‘/’). But, no difference.
[/edit]

Answer 1

Try

clear:both; overflow: auto

on the surrounding DIV.

By the way, a <ul> with <li> s may be semantically more fitting than <div>s here. Won’t make a difference in the output though.