# [web] [css] Row not properly aligning with floats

This topic is 3911 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

I'm not sure what exactly I'm doing wrong here:
<style>
.main { clear: both; }
.a { float: left; }
.b { float: right; }
</style>
<div class='main'>
<div class='a'>Alpha</div>
<div class='b'>Beta</div>
</div>
Echo

It renders with all three texts on the same line, like this:
AlphaEcho                   Beta
I can have "Echo" properly align by adding a break right after the two float elements, but that's not the kind of solution I want. What's the best way to fix this?

##### Share on other sites
Do you want "Echo" on the line below? The "clear: both" happens before the div, so it won't help you at all. Try This:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><style>.main { overflow: auto;}.a { float: left; }.b { float: right; }</style></head><body><div class='main'> <div class='a'>Alpha</div> <div class='b'>Beta</div></div>Echo</body></html>

##### Share on other sites
The overflow version makes it work in Firefox, but not IE... I've also tried to surround "Echo" by a div with style="clear: both", but that doesn't work.

##### Share on other sites
It (overflow) does work in IE7, but if you have to support IE6 then I pity you... Perhaps someone has come up with a clever hack for this scenario, but I don't know.

Wrapping <div style="clear: both"> around Echo should surely work even in IE6. What is its behavior?

##### Share on other sites
I think I've already tried that, but I will make sure once I get back to my computer today.

##### Share on other sites
I make a class

.clear {clear:both;

I then place the div

<div class="clear"></div>

Wherever I would like to clear both sides.

<div class='a'>Alpha</div><div class='b'>Beta</div><div class="clear"></div>

##### Share on other sites
Quote:
 Original post by markadrakeI make a class*** Source Snippet Removed ***I then place the div*** Source Snippet Removed ***Wherever I would like to clear both sides.*** Source Snippet Removed ***

Ouch. Your solution is not semantic markup.

Why not just
<?xml version="1.0"?><html>  <head>    <style type="text/css">    .main { clear: both; }    .a { float: left; }    .b { float: right; }    p { float: left; }        </style>  </head>  <body>    <div class="main">      <div class="a">Alpha</div>      <div class="b">Beta</div>    </div>    <p>Echo</p>  </body></html>

##### Share on other sites
I fail to see where my example fails when writing semantic markup. As far as I've ever been concerned, semantic markup is classifying text on a page correctly (by use of headers, paragraphs, lists, etc).

"clear:both;" isn't semantics, it's visual appeal, or aesthetics. It's used with browsers that are cpaable of handling html and css, and has no appearance to many mobile phones or text-based browsers, or cause any accessibility or useability concerns with the blind.

The whole point is to bring the next line to the bottom of the largest div, whether that is class 'a' or class 'b'. Also, the next element may not be a paragraph, it could be another div that's the beginning of a footer in most cases.

<style>.a { float: left; }.b { float: right; }.clear {clear:both;}</style><div class='a'>  <ul>    <li>Alpha</li>  </ul></div><div class='b'>  <h2>Beta</h2>  <p>Paragraph</p></div><div class="clear"></div><h1>Header</h1><p>Paragraph</p>

##### Share on other sites
The "clear: both" solution does knock the following div down to the next line, but it does not force the float container to actually encompass its children - the main div doesn't resize to fit the inner two. I had forgotten earlier to metion that the float container (the one which contains the two float elements) has a background, so it needs to contain the inner elements.
For now, I'll keep the break-fix.

##### Share on other sites
Not exactly sure what you mean but there are tricks to do what you want if I'm going in the wrong direction.

<div id="main"> <div id="LEFTaligned"> LEFT aligned content </div> <div id="RIGHTaligned"> right aligned content </div> <div class="clear"> </div></div>

That should make main's background fully extend to the bottom of the longest div inside of it.

That works.

Thanks!