Question

I am trying to use an unordered list to simulate tabs in CSS but the ones I create somehow extend into a form below them (which of course is unintended)

I created the tabs by floating links to the left. This is what I want,

But unfortunately, this is what am getting. Notice how the tabs displace the ‘input’ elements of the form. What is going on?

Here is my markup and CSS

<link rel='stylesheet' type='text/css' href='style.css'>
<div id='page'>
    <ul class='tabs'>
        <li><a href='www.google.co.ug'>google search</a></li>
        <li><a href='showall.php'>show all names</a></li>
        <li><a href='logout.php'>logout</a></li>
    </ul>
    <form action='storedata.php' method='post'>
            <div class='simpledata'>
                <label for='fname'>first name</label>
                <input class='kyetagisa' type='text' name='fname' size='20'>
            </div>
        //more elements added here

    <input type='submit'>
    </form>
</div>

And here is style.css

label
{
    text-align:right;
    width:150px;
    float:left;
    clear:both;
    margin-right:5px;
}

div.simpledata
{
    margin-top:5px;
}

ul
{
    list-style:none;
}

ul.tabs a
{
    float:left;
    margin-right:10px;
    color:white;
    text-decoration:none;
    background-color:#00e;
}

#page
{
    background-color:#eee;
    margin-left:130px;margin-right:130px;
    height:180px;
}

Answer 1

You could use:

form {
    clear: both;
}

To force the form (and its child elements) to appear below the ul.

JS Fiddle.