<form> causing break between floating <div>'s

[mat]

I want to have this horizontal navigation bar at the top of my page with left side for a search and the right side for a menu.
For this i need to have 2 forms and 2 <div>'s

# Code


.topL{
padding: 4px;
float: left;
}
.topR{
padding: 4px;
text-align: right;
}

<form>
<div class="topL">
..search
</div>
</form>

<form
<div class="topR">
...menu
</div>
</form>



So when this bar should ideally display like -- it instead displayed like -_ because the form causes a break.

Is there any simple fix for this ?

[MCookie]

Simple fix: your floating .topL div needs a width..

[cg9com]

also, you could add " margin:0px " to your <form> css

[mat]

margin:0px worked. The width bit made it wider but they still didn't quite line up, i'm not sure if i was doing what you meant though.

oh well :) Cheers both.

[MCookie]

Wait a minute.. after a second look I saw your were floating forms instead of divs. In that case, give a width to the left form. Or put the forms in the divs. If you float any element, it has to have a width.

[mat]

Do they? hmmm, thanks -I didn't know that. :cool: