I’m working on a project for school (a rare time when my hobby/passion gets intertwined with my education) where I design a website.
Take a look at this image. (Is that against the rules?) See the golden box in the red box? I want that to be a floated ‘quick facts’ box. From what I know, I should position the golden box in the red box and then ‘float:right’ the gold box. Correct?
I also want the two column layout. In response to Paul O’b’s response to this thread, I was going to make two divs that are floated and then position the various colored boxes inside of the div. Good idea?
I was going to make two divs that are floated and then position the various colored boxes inside of the div. Good idea?
By ‘position’, I would avoid using actual ‘position: whatever’. Once those divs are contained in another div, they will just sit where they need to without any positioning. You can put top/bottom margins on them to space them out if you need to.
Yup, that’s how you do it. Be sure to add some form of float clearing or float wrapping on it’s parent (the red box) so that if your content wrapping around the float is too small, the parent container doesn’t end up too short.
I would only float ONE of the div, since floating both means declaring widths on both, shoe-horning you into a crappy fixed width layout… even as a crappy fixed width layout it’s generally easier to float one element, then apply overflow/indentation prevention to the other that way you don’t have to sit there doing the math for the other one… it will just auto-increase in size to fit.
Shows float clearing and float indent prevention in action – using overflow:hidden for modern browsers and haslayout triggers for legacy versions of IE… as well as showing what happens when you don’t use them.
You could also use what’s called the ‘double wrapper’ technique, or it’s cousin “holy grail” - but that can be ‘overkill’ in a lot of layouts.
That’s actually the simplest of floats, though the outer box should have float wrapping on it so that if your content wrapping around it ends up smaller, the outer box contains it.
I’ll call them #redBox and #goldBox for now – in production code their ID’s should say what they are, NOT what they look like…
<div id="redBox">
<div id="goldBox">
Some Content to be floated
</div>
<p>
Content that should wrap around div #goldBox Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- #redBox --></div>
#redBox {
overflow:hidden; /* make sure this box 'wraps' it's floats */
zoom:1; /* trip haslayout, make sure legacy IE 'wraps' floats */
padding:1em; /* just to make it pretty */
background:#F00;
}
#goldBox {
float:right; /* position right so that 'flow' content wraps around it */
padding:1em; /* just to make it pretty */
background:#F80; /* orange, gold, whatever */
}
Really simple contained float. You might want to set a width on the float just so that you have control over it’s wrapping behavior, though that would really have to be dictated by the content plugged into the markup. Without the actual content it’s hard to say what the markup should ACTUALLY be.
Give the wrapper a background color or border. Or whatever…anyway notice how it doesn’t display. That’s because the wrappers height is actulaly 0. It doesn’t recognize the floated elements are there. In order to “open the wrappers eyes” you need to do some sort of clearing technique, whether the infamous clearfix (you can google that), or a clear:both’d element at the end of wrapper, OR overflow:(something besides visible, the default value)
Any one of those 3 options will cause the parent to recognize the floats are there, and contain them, aka be an actual parent :).
When you ‘float’ an item, it is ‘removed from flow’ – which is to say it’s height, width, and anything else about it is NOT reported to it’s parent container or any siblings/parents of that parent container. That example page of mine shows this in action – on that first set of boxes the inner red DIV is really tall and floated, the outer DIV is not set to ‘wrap’ floats, so the red box pokes out the bottom. In the second one, the outer box expands to contain the red one because a wrapping behavior is triggered – that’s what the overflow does in modern browsers, and what the ‘zoom:1’ – aka a haslayout trigger – does in legacy versions of Internet Exploder.
There are several ways to make that parent container ‘wrap’ a floated element – basically putting that float ‘back in flow’. One way – the one people usually find first, is to put a dummy empty “sandbag” DIV in set to clear=“both”. “clear” says “this element must appear after the float instead of wrapping around it.” Seems like a good solution at first, but it means extra markup – and a good rule of thumb is that if it comes down to adding more markup, or adding more CSS - choose the CSS. You put CSS in an external file, you use the same CSS across multiple pages, it’s only loaded once for all those pages saving you bandwidth. Basically, caching is a good thing.
Since we don’t want that extra markup, the next thing people will try is called “clearfix” – this needlessly complex train wreck of a class; that basically is adding a class to the markup for no good reason, and pulling all sorts of stupid tricks to get wrapping workin. In case you couldn’t tell – not a fan.
But there are two things that will make a container wrap floats inside it easily – one is to make the container itself be floating. Floats wrap floats – but with floats playing weird games with their widths, declaring widths making using padding tricky, etc, etc… its’ not a great choice… also an entire layout where EVERYTHING is floating can also be a bit… fragile.
The other one is overflow… overflow:hidden is usually used to ‘chop off’ positioned elements or content larger than the dimensions stated on the element… for example if you had a DIV 320 px wide, and a IMG inside it 400px wide, setting the DIV to overflow:hidden would ‘chop off’ the right 80px of that image. This is a very powerful ability and can be used for all sorts of handy effects – but it does something else to that container…
So long as a fixed height isn’t set on the element overflow:hidden is applied to, said element will “wrap” any child floats… as the second pic in that little demo of mine shows. If you do set a height, be warned if the content is taller than that height, it’s getting chopped… As a rule setting fixed heights on, well… anything with variable content inside it is a bad idea.
Unfortuantely while said behavior is in the CSS 2.1 specification, IE6 and earlier were written while that specification was still in DRAFT (and of like how people are now using HTML 5 and CSS3 while it’s still in DRAFT, and using the same lame excuses to justify it)… because of that not all it’s behaviors were complete or accurate to the finalized spec – and one glaring omission is overflow wrapping floats…
But, there’s a concept they introduced to IE BEFORE there even was such a thing as CSS called “haslayout” – some HTML elements by default would ‘have layout’; extra calculations to figure out thier position and size as they might change or have changes applied that could alter the entire rest of the page – other elements would not ‘have layout’ and as such not need all those extra calculations; the laugh of this is that it made IE many times faster than Netscape, and one of the reasons that IE4 was the start of Netscapes decline. (LONG before they started bundling IE with the OS – a lame copout given the number of Mac users that use Safari as opposed to FF). When CSS was introduced haslayout was triggered by some CSS properties and not others, and tripping haslayout introduces a whole bunch of extra positioning oddities.
Amongst these oddities is that elements “with layout” will wrap floats… Of all the different things that trip haslayout, one of the easiest to use is the zoom property. zoom:1 doesn’t actually change the content, but it trips “haslayout”, fixing all sorts of strange bugs but more importantly, making the container wrap any floats.
Used to be people *****ed about zoom:1 and would use other tricks (like height:1%) to trigger haslayout… Zoom is an IE specific property that is “invalid CSS” – no arguing that, but with the SLEW of vendor specific nonsense people are using (and incorrectly calling CSS3) like -moz, -webkit, -o, -ms, etc, etc… are we really at a point of poo-pooing a simple six character vendor specific property that used well can make pages work all the way back to IE 5.5? PLEASE…
You can find a more complete explanation of haslayout and it’s triggers at these fine retailers – millions sold in Europe:
It’s good to know about haslayout – it’s not a be-all solution to IE shortcomings, but in many cases tripping it is all you need to fix ‘problems’ in IE7/earlier. Newer versions usually don’t need it, though in IE8 there are still a couple times it wigs out and haslayout “is your only hope”.
Sorry this got a bit long – but floats and the behavior of containers around them is actually a very complex topic with LOTS of different answers and approaches; figured it might help to get a nice thorough explanation in place – as I’ve rarely seen a explanation in a book or tutorial that said WHY or listed more than one approach. The answer is usually just “Do this”… and then “moving on…”
Like anything else in HTML/CSS, I suggest actually playing with it in the code – add or remove various properties, try it in three or four different browser engines, and see what happens. It’s always easier to learn by doing than by having someone just tell you about doing it.
Thanks for the informative summary, deathshadow60. I read through the entire thing and it helped a lot. I’d much rather learn than get a quick fix. and have to come back to it later.
Confirm/tell me I’m stupid for this stuff:
So zoom:1 is just irrelevant (to displaying anything) - I assume that it displays things at 100%? It’s really an IE 7- ‘fix’?
The best way to wrap floats is to use overflow:hidden.
I’ll look up haslayout more in depth later - seems really complicated.
So what is clear used for? I know that it relates to floats…doesn’t it clear content away from a float?
zoom is IE proprietary and you need not concern yourself with what it does. It basically gives haslayout for IE, which can fix (or cause) several IE7 and down bugs.
The best way to contain floats is overflow:hidden, MOST of the time. Unless you need something hanging out the container for aesthetics.
Haslayout can be extremely tricky, especially knowing when it’s causing stuff to break.
Clear property clears content away from a float, yes, and if used as the last element in a contaienr with floats, it can be used in place of overflow:hidden;. The reason being is that parents see non floated elements. If you use clear:both on something, for example, the parent sees that and will wrap around that element. If you have a floated element after that (and the parent doesn’t have overflow on it) then it won’t wrap around that, and in which case you’ll need overflow:hidden;, but clear, most of hte time, is not to be confused with overflow:hidden, they both CAN do the same thing, but it’s all situational.
Hopefully that sounds right. I explained best I could. Let me know if you need clarifications :).
Overflow hidden contains floats, it doesn’t make it so elements don’t cling onto floated elements :).
If you have this…<img><p>text</p>
The image is floated, the <p> is not styled at all. THe <p> is clinged onto the float. Even if you put overflow:hidden; on the parent of that image and paragraph, it won’t change anything. You’d need to clear:both hte <p> to force it to not be clinged.
Let’s give you a test-case in which you can see what not having any behavior on the sibling to the float has, what overflow/zoom does, and what clear does… For a test case we’ll just do a DIV, a floated empty span, and a paragraph.
<div>
<span></span>
<p>
This text has no extra values applied to it -
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
We’ll give the outer div a fixed width so we can see what’s going on with it, margin it and pad it to be pretty, and set a background color on it so it’s visible to us.
“default”, the text wraps around the floated element on both axis. You add overflow:hidden (and zoom for old IE versions) it rides up next to it, but does not wrap beneath it. With clear, it’s pushed down past the float.
Note that clear accepts “left”, “right” or “both” – so you can clear floats on one side but not the other, which can come in handy from time to time.
Also notice how the actual P goes UNDER the float (as you can see from it’s background) when nothing extra is applied – only the inline-level elements inside the P (the textnode/cdata) pay attention to the float; display:block elements do not and will stretch right beneath it – if you think about how the text has to wrap below it and that it has to be a BOX not a polygon, it would have to do that.
Again, it’s easier to understand when you can see working examples of them.
Just made a couple changes to that example – I removed the overflow from the DIV declaration, and added two more boxes with blue floated 12em tall bold tags. The first of these has nothing set on the DIV, the second one does.
I did this to point out what Ryan mentioned about haslayout actually CAUSING problems (really good thing to bring up!) – as mentioned it’s not a cure-all and sometimes can cause more problems than it solves… 'Width" happens to be a haslayout trigger, so while the first example of the tall blue box the grey DIV does NOT wrap it in modern browsers, go back to IE7 or earlier, and lo and behold both of them are wrapping it instead of just the second one. Something important to keep in mind about haslayout if still supporting IE7/lower.
This is why I often prefer having a master ‘wrapping’ DIV around my entire layout or a single column to state the width once, then let all the smaller inner subsections auto-expand to fit it instead of having to state their widths – you trip haslayout with one of the other triggers like width or height on something you don’t want exhibiting that behavior… You’ll blow hours going “what’s wrong with this?!?” when testing 7/earlier.
Yes in a fluid layout I will often float the left column and then set the right column to overflow:hidden to form the other column without the need for a width. This also avoids any rounding errors as they are soaked up in the overflow element (unlike two floats of 50% width which will add up to 100% in some browsers).
There is however a nasty bug to beware in Chrome/Safari and if you also apply a margin to the overflow element to move it way from the float then webkit reduces the width of the element rather than applying a margin on the side facing the float.
The content now has a 550px margin to the right instead of a 200px one in other browsers. The solution is to put your margin on the float to move the overflow element away rather than using margins on the overflow element.
