Stacking floated block-level elements


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––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:

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

<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>

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

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;

#relationships {
	float: right;

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

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.

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

You could just do this:

#website-header form {
  clear: right;