Sign in to follow this  
deadimp

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

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


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
Share on other sites
Quote:
Original post by markadrake
I 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 this post


Link to post
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 this post


Link to post
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 this post


Link to post
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this