...

View Full Version : Clearing floats



PonchoX
02-22-2011, 11:05 PM
hi.

in dreamweaver cs4, when i create a new html document (xhtml 1.0 strict) for a 3-column page with header & footer, the auto-generated document inserts a line-break just before the footer with the sole purpose of clearing (clear: both).

why not just apply the clear to the footer div?

for example > #footer { clear: both; }

these folks at adobe must be smarter than me, but i dont see why they did this.

insight from the experts here?

here's the code/markup from the end of the html page:


tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

xelawho
02-22-2011, 11:11 PM
I'm no expert, but here (http://www.quirksmode.org/css/clearing.html) is an alternative to clear:both

PonchoX
02-22-2011, 11:27 PM
thanks. interesting read.

tho that page seems to focus on stretching the divs so a border will appear around both (floated) divs.

i dont have that problem cuz:

1. i dont use a border
2. my center column isnt floated.

tho maybe they used the line break for the same reasons your article mentions.

i wasnt sure by what they meant here:


in order to force the #container div to contain all child floats


contain?

Excavator
02-23-2011, 02:36 AM
Hello PonchoX,
The whole thing about clearing with overflow: auto; is being able to do without adding markup, which is what the folks at adobe are doing to you. Adobe, Office, FrontPage ... they are all at least 10 years behind when it comes to coding websites!

You are right, putting clear: both; on an element that already exists makes a lot more sense than adding an empty element that serves no other purpose.

Excavator
02-23-2011, 02:41 AM
i wasnt sure by what they meant here:

contain?

It's easy to demonstrate with a background color.
Look at these two examples.

Not Contained:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #fc6;}
#container {
width: 800px;
margin: 30px auto;
background: #999;
}
#box {
width: 200px;
height: 400px;
float: left;
background: ##f63;
}
</style>
</head>
<body>
<div id="container">
<div id="box"><h1>box</h1></div>
<!--end container--></div>
</body>
</html>

Contained:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #fc6;}
#container {
width: 800px;
margin: 30px auto;
background: #999;
overflow: auto;
}
#box {
width: 200px;
height: 400px;
float: left;
background: ##f63;
}
</style>
</head>
<body>
<div id="container">
<div id="box"><h1>box</h1></div>
<!--end container--></div>
</body>
</html>

PonchoX
02-23-2011, 04:01 AM
Ah, Mr. Ex.

My 6-year-old *loves* diggers of all stripes. Do you operate heavy machiney?

Sometimes, at lunch break, they let him climb up on there and sit in the seat.


they are all at least 10 years behind when it comes to coding websites

What do you use? Hand-coding ninja?

I've found Dreamweaver a helpful tool. Using CS4. CS5 supports HTML5.

I see your examples. The uncontained has no gray box, like the contained one does.


The whole thing about clearing with overflow: auto; is being able to do without adding markup

You concur with xelawho that "overflow: auto" is a good/better method?


You are right, putting clear: both; on an element that already exists makes a lot more sense than adding an empty element that serves no other purpose.


But it sounds like that wont 'contain' the child floats in the #container div. ??

Excavator
02-23-2011, 04:28 AM
Ah, Mr. Ex.

My 6-year-old *loves* diggers of all stripes. Do you operate heavy machiney?

Sometimes, at lunch break, they let him climb up on there and sit in the seat.


Yes I do. In the summer time that is my real job.



But it sounds like that wont 'contain' the child floats in the #container div. ??

If your #footer is the last element in the same containing element as your floats it will.

PonchoX
02-23-2011, 04:55 AM
yeah, the footer is part of the container (which some layouts call the 'wrapper').

not sure why they added the line break .. other than maybe they set up their layouts for pages withOUT footers .. in which case i guess you would need another element down there to clear.

ya think?

shankar.adodis
02-23-2011, 05:25 AM
hi.

in dreamweaver cs4, when i create a new html document (xhtml 1.0 strict) for a 3-column page with header & footer, the auto-generated document inserts a line-break just before the footer with the sole purpose of clearing (clear: both).

why not just apply the clear to the footer div?

for example > #footer { clear: both; }

these folks at adobe must be smarter than me, but i dont see why they did this.

insight from the experts here?

here's the code/markup from the end of the html page:


tristique in, vulputate at, odio.</p>
<!-- end #mainContent --></div>
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<div id="footer">
<p>Footer</p>
<!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>
Hi,
This is done to clear float values
in some cases when we use float left or right
then there will be problem with div next to it without float tends to behave differently to avoid the we are clearing floats using clear:both



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum