jQueryUi Tabs + DIV "Tables"

Question

On my Website, i made a jQuery tab with this Code:

    <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Grundlegendes</a></li>
  </ul>
  <div id="tabs-1">
    <p>
                <div class="gen_col">
                    <div class="gen_col_1">Benutzername</div>
                    <div class="gen_col_2"><input type="text" name="username" id="username" class="as_input"  /></div>

                    <div class="gen_col_1">Passwort</div>
                    <div class="gen_col_2"><input type="password" name="password" id="password" class="as_input"/></div>

                    <div class="gen_col_0"><input type="submit" name="login" id="login" value="Login &raquo;" class="as_button" /></div>
                </div>


    </p>
  </div>
</div>

The Stylesheet for the gen_col attributes:

.gen_col {
    width:400px;
}

.gen_col_0 {
    width:400px;
    float:left;
    padding-top: 10px;
    font-size:1.5em;
    font-style:italic;
}

.gen_col_1 {
    width:90px;
    float:left;
    padding-top: 6px;
    font-weight:bold;

}

.gen_col_2 {
    width:310px;
    float:left;
    padding-top: 6px;
}

Now, i got this output on my Website:

Is there a way, to display this correctly? (The content of my Tab isn't really a Login, but for Test and demonstrating i add this fields+values.

Thx in Advance

Answer 1

seems you re forgot the clearfix.
add the clearfix class to the .gen_col

<div class="gen_col clearfix">

I think here is a good explanation of this scenario.
Every floating element should be cleared. Very basic CSS stuff ;-)