Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9

Thread: Clearing floats

  1. #1
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post

    Clearing floats

    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:

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

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I'm no expert, but here is an alternative to clear:both

  • #3
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    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?
    Last edited by PonchoX; 02-23-2011 at 01:23 AM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by PonchoX View Post
    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:
    Code:
    <!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:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    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. ??
    Last edited by PonchoX; 02-23-2011 at 03:04 AM.

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by PonchoX View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Apr 2009
    Location
    Newport Beach, California
    Posts
    96
    Thanks
    11
    Thanked 1 Time in 1 Post
    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?

  • #9
    New Coder
    Join Date
    Feb 2011
    Posts
    41
    Thanks
    0
    Thanked 4 Times in 4 Posts
    Quote Originally Posted by PonchoX View Post
    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:

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •