SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Los Angeles
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple float question

    Hi all,

    I've got a content div and a footer div inside a container which has a width of 760px. Quite simply, the user sees:

    Code:
     _____________
    |             |
    |             |
    |             |
    |   CONTENT   |
    |             |
    |             |
    |             |
    |_____________|
     _____________
    |             |
    |   FOOTER    |
    |_____________|
    Now let's say I want to float a tower advertisement to the left, and I want my text to wrap around it, as such:

    Code:
     _____________
    |  __         |
    | |  | XXXXX  |
    | |A | XXXXX  |
    | |D | XXXXX  |
    | |V | XXXXX  |
    | |__| XXXXX  |
    |  XXXXXXXXX  |
    |  XXXXXXXXX  |
    |_____________|
     _____________
    |             |
    |   FOOTER    |
    |_____________|
    
    XXX = Text
    All is great. Basically the adtower div is 160px wide, float:left, just chillin'. BUT, let's say my text is shortened.

    Code:
     _____________
    |  __         |
    | |  | XXXXX  |
    | |A | XXXXX  |
    |_|D |________|
      |V |
      |__| 
     _____________
    |             |
    |   FOOTER    |
    |_____________|
    Ahhh! My content div only goes down to the text, then stops and adtower pushes outside the content div. This is what I WANT:

    Code:
     _____________
    |  __         |
    | |  | XXXXX  |
    | |A | XXXXX  |
    | |D |        |
    | |V |        |
    | |__|        |
    |_____________|
     _____________
    |             |
    |   FOOTER    |
    |_____________|
    So here's my question: How do I get it to look like that? That is, the content div to extend down to always include the adtower div, or whatever else shaped div I put in the content div? I've seen the multi-column templates but I want the text to wrap around the float. This seems like a really simple operation, basically make sure a floating element is fully encompassed by its parenting div. Anyone who could provide the code to do this would be greeeeaatly appreciated.

    Thanks,
    Sam

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You'll need to add some element with the 'clear:both;' property below the floated ad and text yet still inside your content container div.

    Code:
    /* something as simple as this */
    
    div.clearer{
      clear:both;
      }
    And your HTML would look like...
    HTML Code:
    <div id="content_container">
      <div id="advertisement">
         <!-- This is floated Left -->
      </div>
    
      <div id="content_paragraph">
        <p>Content Text here</p>
      </div>
    
       <!-- You're clearing element -->
       <div class="clearer"></div>
    
    </div> <!-- Ending of the content_container div -->
    Some people use a specially styled <hr>, some people a div, some people a span too I've seen.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2004
    Location
    Los Angeles
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Beautiful! That worked perfectly; thanks so much. Just out of curiosity... what exactly happens? I'd just like to know so I know what's going on in my code... I'm a control freak like that... but what exactly is it doing, and how is it different than without using the clear property?

    Thanks again,
    Sam

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think the following from the W3's visual formatting model documentation explains it.

    Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist.

    I might be wrong about that part.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Maxor's explanation is completely correct and probably needs no further explanation but there is a nice demo here from Eric Meyer that should explain the concept even further.

    http://www.complexspiral.com/publica...aining-floats/

    Floats don't exist in the flow of the document in the normal way. What they do is that they make room for themselves by adding padding to content that is alongside. As far as the parent is concerned it only sees the content and not the float and will finish its borders around the content.

    This is by design and allows floats to float in and out of their parents container, however IE will usually enclose the float anyway (but not always). One of the reasons the clear property was designed was so that floats could be cleared and content would start on a new line. Once the float has been cleared with an element that has clear:both (although mozilla usually requires the element to have some height which is why it works better with break than with div) then the parent sees that content and will strecth around thus encomapassing the float.

    The clearer technique I use is as follows.
    Code:
    .clearer{
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    This clears the element (use the same stucture of html as maxors example) without any increase in height or gap that other methods make. However there are cases when mozilla will ony clear if you use <br class="clearer" /> instead of <div class="clearer"></div>

    If you have a look in the FAQ thread there is a long explanation on floats that might also be useful.

    Paul


Bookmarks

Posting Permissions

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