tags:

views:

69

answers:

1

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]

A: 

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.

Pekka
clear:both had no affect, and the ul/li option just added bullets -- yes, I know I can get rid of them, but it made no diff in my error :)
KevinDTimm
Oh forgot one, see my answer.
Pekka
When I added those tags to my div's, no change. But, when I added clear:both (only) to my 'form.login label.fixedwidth {}', everything looks good.
KevinDTimm
Huh? That's not what I expected to happen. But anyway, if it works it works! :)
Pekka