Do you always have to clear?

[jjshell]

Hello,

Let's consider the following code:

#header {
width:960px;
}


#logo {
width:960px;
display:inline;
float:left;
}


#title {
width:960px;
display:inline;
float:left;
}

<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.

[Dr John]

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.

[deathshadow60]

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?

[dresden_phoenix]

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=