1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Development No more! <br class="clear" /> I hate thee!

Discussion in 'Software' started by will., 23 Apr 2007.

  1. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    overflow:auto;

    I don't know if anyone else finds that little tiny bit of code exciting... I do though :D

    Well, maybe not exciting, but definitely nice.

    Basically, since the dawn of time (last may) I've been using <br class="clear" />. A dirty little bit of code that stops containing div's from not surrounding their contents if they are floated. Now though! overflow:auto;

    Its not a discovery of mine by any means, but I read it somewhere, and I had never heard about it before that day and I know there are people on here that do the web design/development dance and I thought it might be helpful.
     
  2. Jamie

    Jamie ex-Bit-Tech code junkie

    Joined:
    12 Mar 2001
    Posts:
    8,180
    Likes Received:
    54
    I didn't know that worked either! Nice find.

    I do my best not to use the clear property by floating things within floated elements.
     
  3. jezmck

    jezmck Minimodder

    Joined:
    25 Sep 2003
    Posts:
    4,456
    Likes Received:
    36
    could you please explain what it does?
    I thought auto was the default overflow setting.
     
  4. Jamie

    Jamie ex-Bit-Tech code junkie

    Joined:
    12 Mar 2001
    Posts:
    8,180
    Likes Received:
    54
    'visible' is the default overflow setting.

    Interesting, the spec for 'auto' says that it's user-agent dependent. How many browsers have you tried it in Will?
     
  5. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    works in everything I have on my machine.

    ie7
    ie6
    ie5.5

    opera (whatever the latest one is)

    firefox

    works in safari as well according to the office mac-humper.

    Bearing in mind, I've been testing it with very very basic css. just 2 floated div's and a container and a footer clearing all of that. I see no reason why anything might happen that isn't already known about though.

    Its already making my life easier. :D
     
  6. Lazlow

    Lazlow I have a dremel.

    Joined:
    8 Aug 2003
    Posts:
    1,464
    Likes Received:
    0
    :hehe:
    Great find! - do you have an example before/after, although I'll try it soon enough.
     
  7. Jamie

    Jamie ex-Bit-Tech code junkie

    Joined:
    12 Mar 2001
    Posts:
    8,180
    Likes Received:
    54
    The only thing that worries me is that if you want to specify a width or height on the containing you might end up getting scroll bars if the content gets bigger.
     
  8. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    Hmm, I will investigate...
     
  9. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    hmmm... you are correct... If the containing div (the one with overflow:auto; ) does get scroll bars if the content gets too big. See the code below.

    Thing is though... if your floating something within a fixed height container.. not only should you not need the fix, your layouts going to go a bit nuts if the content gets bigger anyway.

    Code:
    <div style="background:#ff004c; height:200px; width:450px; padding:20px; overflow:auto;">
    	<div style="width:10em; height:10em; background:#CCC; float:left; color:#FFF; margin-right:20px;">
    	</div>
    	<div style="width:10em; height:10em; background:#333; float:left; color:#CCC;">
    	</div>
    </div>
    
     
  10. [Jonny]

    [Jonny] What's a Dremel?

    Joined:
    1 Sep 2003
    Posts:
    296
    Likes Received:
    0
    Use overflow: hidden. More details on this is here, been using it for a while. :)
     
  11. will.

    will. A motorbike of jealousy!

    Joined:
    2 Mar 2005
    Posts:
    4,461
    Likes Received:
    20
    Surely, having scroll bars is better than making the content unreadable... That seems to actually require a height as well...
     

Share This Page