Stacking floated block-level elements

HTML & CSS
1

Hi,

I’m trying to write cleaner, more semantic markup and thus trying to ferret out when I must enclose things in a div or span and when I can make do without.

At the top right corner of this wireframe–http://www.fitbirth.com/wireframe/index2.php–the search area is, of course a form, and the links are an unordered list. Both of these block-level elements are floated right.

Is it possible to get the links and the search form stacked so that the search form is under the links without enclosing them in a div or span?

Here’s the markup:


<h1>
	<a href="...">
		Logo
	</a>
	fitness during pregnancy, childbirth and beyond
</h1>

<ul id="relationships">
	<li><a href="...">Facebook</a></li>
	<li><a href="...">Twitter</a></li>
	<li><a href="...">Email</a></li>
	<li><a href="...">RSS</a></li>
</ul>

<form id="search" action="" method="get">
	<input name="" type="text" />
	<input name="Search" type="button" value="Search" />
</form>

Here’s the styling:


#website-header h1 {
	font-size: 13px;
	line-height: 20px;
	width: 320px;
	float: left;
	margin-bottom: 20px;
}

	#website-header h1 a {
		display: block;
		font-size: 40px;
		line-height: 40px;
	}

#search, 
#relationships {
	float: right;
}

Thanks for any and all help you can give!!!
James

2

It’s nice when there’s a simple solution. :slight_smile: To be honest, I’m not sure whether I would have just used a div there or not. I don’t know of any downsides to clear: right in this situation, so it would be interesting to know what others would do.

3

omg, so simple… i knew it had to be but it just consistently escaped me for days… thanks so much!!!

4

You could just do this:

#website-header form {
  clear: right;
}