Jump to content
  • Advertisement
Sign in to follow this  
deadimp

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

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

If you intended to correct an error in the post then please contact us.

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
Advertisement
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 think I've already tried that, but I will make sure once I get back to my computer today.

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
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!