SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floats? Clearing? Why?

    I'm a little confused on the use of floats and clearing.

    I sort of think that using floats and then clearing them is sort of like using colspan in tables layout.

    Is that correct, or is their a better explaination of their use?

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Floats? Clearing? Why?

    Could someone explain why you would want to use floats and clearing?

    Thanks.

  3. #3
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Floats? Clearing? Why?

    I'm confused when it comes to the subject.


    Could someone explain the usage of floats and clearing?

    Thanks.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A float is removed from the document flow, which means that it doesn't affect block-level elements that come after it.

    If you have two or more floated 'columns' on your page, and want to have a footer that sits below all columns (no matter which one is the longest), you can clear the footer. A cleared element will always be below any element floated in that direction (or any direction for clear:both).

    Does that help?
    Birnam wood is come to Dunsinane

  5. #5
    Setting up a connection... mgyth's Avatar
    Join Date
    Nov 2004
    Location
    Mosjøen - Norway
    Posts
    255
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use it if you want a image to float in a block of text i.e. And for fluid layouts.
    Clearing can be used to wrap text that might look bad when usign floats.

    As all the CSS properties it is used to position and design the layout of the page to your desire.
    www.gwd.no Webdesign.

  6. #6
    Caveat surfer Buddy Bradley's Avatar
    Join Date
    May 2003
    Location
    Cambridge, UK
    Posts
    2,366
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tommy(AutisticCuckoo)'s article explains it all very well: http://www.autisticcuckoo.net/archiv...12/10/floating
    Last edited by Buddy Bradley; Mar 4, 2005 at 02:54. Reason: wrong user name, duh...

  7. #7
    Winemaster bronze trophy BonRouge's Avatar
    Join Date
    Oct 2004
    Location
    Sendai, Japan
    Posts
    2,417
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Threads merged - Please only ask the same question once

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The FAQ has a lengthy section on floats and is worth reading

  10. #10
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry about the doups, I couldn't get a post to go through, and didn't realize the other two made it to the server.

    I found a couple of articles on floats, it showed how floated blocks of text can be wrapped around another elements, which I think is pretty cool.

    I'm still not anywhere near up to speed on using floats though.

    The results are always unpredictable once I try to put more than two floats side by side for layout.

    Two is no problem, the third however, always wants to behave in a manner other than what I expect it two.

    For example; In a 3 colum layout, a 20% div floated left, and a 60% div floated left, no problem, but when I try to float another 20% right, it drops below the other floats. logic says it should fit, but nooooo, it drops.

    The only way I can get it to work is to not float the center div, even then theirs some tweaking to be done.

    It seems to me that floats are better for adding things to the template after the basic layout is done, yet I see alot of people using them to build their templates.

    Even so, I can't see the advantage of using floats for basic layout.

    Is their an advantage to using floats for bacic layout, as opposed to absolute and relative positioning?

  11. #11
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DocType
    For example; In a 3 colum layout, a 20% div floated left, and a 60% div floated left, no problem, but when I try to float another 20% right, it drops below the other floats. logic says it should fit, but nooooo, it drops.
    That's probably because of rounding errors (or adding padding or borders to the floated elements, which increase their widths). Try 20/59/20 instead, to leave some room for rounding errors.

    Quote Originally Posted by DocType
    Is their an advantage to using floats for bacic layout, as opposed to absolute and relative positioning?
    Relative positioning is not useful for layout work, other than for establishing a new context for absolutely positioned children.

    Absolute positioning may be an option, as long as you always know which column will be the longest (regardless of window width), or if you don't need a footer to go at the bottom across all columns.

    In a template, however, you often don't know this, and then floats are a better solution. Besides, and advantage (yes, really! ) of floats is that they will wrap if there isn't enough room for them. That means you can create a layout that will work in very narrow windows.
    Birnam wood is come to Dunsinane

  12. #12
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    A float is removed from the document flow, which means that it doesn't affect block-level elements that come after it.

    If you have two or more floated 'columns' on your page, and want to have a footer that sits below all columns (no matter which one is the longest), you can clear the footer. A cleared element will always be below any element floated in that direction (or any direction for clear:both).

    Does that help?
    I understand that floats behave similarly to absolutely positioned objects.

    I'm not sure what you mean when you say "A cleared element will always be below any element floated in that direction (or any direction for clear:both).

    Direction confuses me, I normally always use 100% footers, so I don't see how direction applies.

    Do you mean, that if I have a float left, and I have a short footer that I clear, then the footer will move to the left, and under the float? Assuming I use clear left.

    And if I have two floats, and a short footer, I can choose which direction I want the footer to go, by using either clear left or clear right?

    And in the event of a 100% footer, and two floats, I would have to use clear both.

    And even with a 100% footer, and one float, I would still have to clear it to get the footer to snuggle up underneath.

    Is that anywhere near how it works?

  13. #13
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo
    advantage (yes, really! ) of floats is that they will wrap if there isn't enough room for them. That means you can create a layout that will work in very narrow windows.
    O.K. I have noticed that floats tend to bulldoze their way around a layout, by shoving things out of their way, as opposed to overlapping and hidding other elements.

    I quess that would be useful in the case of a small screen, such as a handheld device, that way the user could scroll down a long line of vertically stacked divs.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I understand that floats behave similarly to absolutely positioned objects.
    The only common thing beween a float and an absolute element is that they are to some extent both removed from the flow. However with a float you can bring the flow back to the page by using clear which starts all content below the float instead of wrapping around the float.

    An absolute element will ignore all other content on the page and there is no natural way to bring the flow of the page back underneth the absolute element.e.g. if you want a footer under it as already mentioned by Tommy. Absolute layouts are fine but a bit restrictive. Floats are more flexible but need a lot more work to make them perform correctly especially with regard to browser bugs.

    clear left means that floated elements may not appear to the left of the element. If you float an element to the left and then you float another one next to it which has clear left it will not in fact sit next to it but will clear it and start underneath because the float is to the left.

    clear right means floated elements cannot appear to the right of the element and clear both means floated elements can not appear on either side of the element.

    If you read the faq a lot of this is explained in more detail and a lot of the examples in the 3 col demos sticky thread use two floated columns.

    I quess that would be useful in the case of a small screen, such as a handheld device, that way the user could scroll down a long line of vertically stacked divs.
    Thats the general idea yes Thats the benefit of floats and also the disadvantage when you don't want the layout to shift.

    The best way to learn is to continue experimenting as you are doing and you will soon pick it up

    Paul

  15. #15
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul has already explained this, but I'll give it a go as well.

    Quote Originally Posted by DocType
    I'm not sure what you mean when you say "A cleared element will always be below any element floated in that direction (or any direction for clear:both).

    Direction confuses me, I normally always use 100% footers, so I don't see how direction applies.
    What I mean is that clear:left will clear anything that has float:left; clear:right will clear anything that has float:right; and clear:both will clear all floated elements.

    Let's say you have a sidebar that is floated to the right. In the main content, you have some images that are floated left. If you want to make sure that some text appears below all the images – but not necessarily below the sidebar – you can apply clear:left on it. Should you use clear:both, that text will be forced to drop below the sidebar as well.
    Birnam wood is come to Dunsinane

  16. #16
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where does the clear end? I'm assuming it's going to be at 50% of the distance between the two floats.

    Wouldn't setting a right margin on the block you don't want text beside of, give you more precise control over how far from the block the text can appear?

    Well, maybe not, it might force everything on the right to the right the width of the margin.

    Can you put a percentage, or some other mehtod of measurement on a clear, to allocate a certain amount of space?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Can you put a percentage, or some other mehtod of measurement on a clear
    All clear does is increases the top margin of the element so that it clears the float to the side specified. Whatever side margins you have on the element will still stay in effect. There is nothing that you need to add or do to clear.

    Clear just says "is there a float above me in the html"? If yes then i better move down a bit to avoid it. It moves down until its top margin clears the bottom margin of the float. The float above it that it clears will be specifed by either the left or right property.

    If its clear:both it will move below all floats above it. If its clear right it will move below all floats to the right of it (and above it) and vice versa for left.

    All clear does is to stop elements from being alongside a float and puts the element back in the normal flow of the document.

    Paul

  18. #18
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I knew that, I just wasn't sure what AutisticCuckoo meant.

    Now I realize that the sidebar he was referring to has a greater height than the images.

    In that situation a clear:left would force the block to hunt for the next available space below all the left floats that are above it.

    Clear:both would cause it to hunt for a space below all floats above it.

    Would a container div with a footer nested in it, carry the footer down the page when given a clear:both?

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Would a container div with a footer nested in it, carry the footer down the page when given a clear:both?
    If the footer was clear both: then the footer would try and clear all floats above it in the html and would stretch the container div also but not move the container div. if the container div was clear:both then the whole lot would move below the floats.

    Note that sometimes IE will restrict the clear to inside the container div only whereas other browsers will clear all floats on the page eifther inside or outside the container div.

    You can restrict the clearing to inside a container div by floating the container div or messing about with overflow (little buggy) on the container div .

    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
  •