SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Jan 2005
    Location
    blahblahblah
    Posts
    1,447
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Do you always have to clear?

    Hello,

    Let's consider the following code:

    Code:
    #header {
    width:960px;
    }
    
    
    #logo {
    width:960px;
    display:inline;
    float:left;
    }
    
    
    #title {
    width:960px;
    display:inline;
    float:left;
    }
    HTML Code:
    <div id="header">
    <div id="logo"></div>
    <div id="title"></div>
    </div>
    Is it ok not to have a .clear div after #logo and #title? My point is to avoid divitis.

    Regards,

    -jj.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You have two divs, each the same width as the containing #header div. So floating will have no effect as both fill all the available space.

    You do not need to add an extra div below a series of floats, you add a clear to the first thing below them, be it a paragraph, div, h2, usually as an extra class called .clearfix or similar.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that code really makes no sense, since neither float should actually happen.

    NOT that there is ANY reason for #header to even exist in 99.99% of the sites people slap that extra div in there.

    Of course, you also have to ask WHAT IS that content, and IS there a semantic tag for it, since it could well be inappropriate for #logo or #title to actually be DIV when a heading tag, paragraph tag, or list tag may in fact be more suited to the job -- heck could be it should be a SMALL tag inside a H1 just based on the names you used.

    Though, are you asking about float CLEARING or float WRAPPING? If you want #header to wrap that's easy enough to do -- if you always have the same element after those like say, your menu, just put clear:both on that.

    In either case, I always advise AGAINST presentational nonsense like clearing div, clearfix, and the whole host of other bloat you see people using all the time -- usually there are MORE than enough tags in there to hook SOMETHING with the desired behavior without slapping extra elements or even classes in there.

    Really, you want to avoid divvitus, ease up on the number of unnecessary div and use semantic markup saying what things ARE. Like say... a page HEADING. Heading? Don't we have tags for that?

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Even tho your example was too minimal to EVEN GUESS at what the semantics for your page was going to be, Sadow has a point.

    Still I think this is the answer you are looking for: Floating the parent will clear its children.. but then that kind of becomes a vicious cycle. I guess what you are looking for is the most modern way of clearing floats. one way is to use a .clrfix ( baiscally .clr:after{ display:block; content:"" ; clear:both;} but that is not very IE friendly. That's to give your container (#header) overflow:auto; . his method is not always perfect, as elements that are AP'ed and would appear outside your container will be cropped off.



    You shoudl really lo=


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
  •