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.
Page 2 of 2 FirstFirst 12
Results 16 to 16 of 16
Like Tree4Likes

Thread: HTML & CSS Frequently Asked Questions

  1. #16
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts

    Q: How can I "clear" floated elements?

    Note: The answer to this question was originally posted here, by forum member vtjustinb.

    A: Here's an example of a float-clearing scenario:

    Code:
    <div id="wrapper">
       <div id="left-nav">
           ....
       </div>
       <div id="content">
           ....
       </div>
    </div>
    Now let's say that we give #wrapper a background color of red, float #left-nav left, float #content right, and adjust the widths, padding, and/or margins to fit.

    We view our page expecting to see #left-nav and #content beside each other, which they are, but there's no red background? Why?

    Well, this has to do with "normal flow," which is the default positioning the browser renders elements. If we didn't float #left-nav and #content they'd never be able to be beside each other—by default they're block-level elements and render on top of each other.

    By floating the two inner divs, we take them out of normal flow which allows them to position beside each other. This is the effect we want, but the problem is now since both of #wrapper's content divs are floated there's technically nothing contained inside of it in normal flow. This means that when #wrapper goes to compute its height it thinks its height is zero, because there's nothing inside of it in normal flow.

    clear is a CSS property that handles this problem. When you clear floats, it forces the containing divs to expand its size to include the size of its floats. You can accomplish this by the following:

    Code:
    <div id="wrapper">
       <div id="left-nav">
           ....
       </div>
       <div id="content">
           ....
       </div>
    
       <div style="clear: both;"><!-- clear floats --></div>
    </div>
    Now, because the two floats are cleared (you can clear left, right, or both) #wrapper will expand its height to include the height of #left-nav and #content, and because #wrapper has a height now the red background is shown.

    This ascii drawing describes this phenomenon visually:

    Without clearing:
    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    +---|           |----|                    |---+
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        | #left-nav |    |      #content      |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        |           |    |                    |
        +-----------+    +--------------------+
    With clearing:

    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   | #left-nav |    |      #content      |   |  
    |   |           |    |                    |   |  
    |   |           |    |                    |   | 
    |   |           |    |                    |   |
    |   |           |    |                    |   | 
    |   |           |    |                    |   |
    |   |           |    |                    |   |  
    |   +-----------+    +--------------------+   |
    |                                             |
    |   +---clear: both-----------------------+   |
    |                                             |
    +---------------------------------------------+
    When you specify a specific direction on the clear (such as left, or right), it only considers elements that are floated in that direction. In the above example, if the #left-nav was shorter than #content and you cleared left, then #wrapper would only expand to cover #left-nav:

    Code:
    +--(#wrapper)---------------------------------+
    |   +-----------+    +--------------------+   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   |           |    |                    |   |
    |   | #left-nav |    |      #content      |   |  
    |   |           |    |                    |   |  
    |   |           |    |                    |   | 
    |   +-----------+    |                    |   |
    +--------------------|                    |---+ 
                         |                    |   
                         |                    |  
                         |                    |   
                         |                    |   
                         +--------------------+   
                                                 
        +---clear: left-----------------------+
    There are also methods to clear floats without adding additional markup to the page. One popular method is described here:

    http://www.positioniseverything.net/easyclearing.html
    Last edited by rmedek; 10-06-2007 at 04:53 AM.
    nelsonrichard likes this.


 
Page 2 of 2 FirstFirst 12

LinkBacks (?)


Posting Permissions

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