Methods for Containing Floats / not clear all
Posted January 5th, 2009 by WilliamCarrier
Log from IRC server Freenode (IPv6) channel #CSS.
| <me> | is there a way that I can limit the scope of clear ? I suppose taking it out of the flow will do the trick but I need it to be in the flow ... for example, if I have a sidebar and in the main content something is floating and I want the following to clear it but if I do so it will clear down after the sidebar wich leave an unacceptable 1/2 page space. Any suggestion on the matter ? The... |
| ...specific page is anonymized | |
| <jedimindtrick> | me: yeah, dont use clear elements |
| use self-clearing containers | |
| <me> | jedimindtrick: they add clearing items no ? |
| <jedimindtrick> | me: nope |
| <me> | jedimindtrick: the one I have is called clearfix and it add a clear: both item ; is there a better way to do so ? |
| [ERROR] | Connection to irc://chat.freenode.net/ (irc://chat.freenode.net/) reset. [Help] |
| <me> | jedimindtrick: sorry net crashed, did I miss something from you ? the last I got was "me: nope" |
| <jedimindtrick> | me: i was talking to you? |
| lol | |
| <jedimindtrick> me: nope | |
| #container { overflow: hidden; } will make the container clear any floated children for all gecko based browsers | |
| err for any browsers but IE | |
| for IE you just have to trigger hasLayout | |
| <jedimindtrick> which can be done by various different ways | |
| <jedimindtrick> | including setting a width on the container, doing zoom: 1; and uhmm other ways |
| http://img142.imageshack.us/img142/9240/kissingpigex2.jpg | |
| i find that mildly disturbing | |
| <me> | jedimindtrick: I don't understand all the concept you've just mentionned but the class I use does all the things you've just mentionned, on the bade the code is <div id="content" class="clearfix" style="background-color: red;"> |
| <jedimindtrick> | clearfix is not the same as what i told you |
| <me> | oh I don't get it all ... got a page for me to learn ? |
| or a keyword ? | |
| jedimindtrick: ^ | |
| <jedimindtrick> | ]search clear |
| ]clear | |
| <_ZofBot4> | Contain floats: http://www.ejeliot.com/blog/59 , www.positioniseverything.net/easyclearing.html |
| <jedimindtrick> | there read the first one |
| look at 'overflow method' | |
| is the one i was explaining | |
| anyway im gonna go take a nap suckers | |
| * jedimindtrick | watches the internet crawl to a stop in his absence |
| <me> | jedimindtrick: thank you kindly, good nap ! :) |
