So I understand that elements with the overflow:auto/hidden property will clear their children, making it a great cross browser alternative to the.clrfx method. But, it also means that unless you use AP you can’t have any descendant elements “leak out” of their parents. But what happens with adjacent elements , or children of adjacent elements?
It seems when and element with defined width and overflow:hidden encounters an element that comes earlier in the source code that has been floated and positioned ( I used margins), it acts as if it also had clear:both.
WHATS WEIRDER, if it DOESN’T have a defined width. it’s width only extends until it touches the edge of the floated element, that is its creates a sot of “open column” look and it doesn’t wrap around or let it flow over itself the way if would have done if it didn’t have overflow: applied to it.
Has anyone on the forum had found applications for this …
Has anyone found a way to get around this effect, that is, found a way to allow FLOATED elements to be positioned OVER elements with overflow:hidden/auto?
as always, any insight or enlightening comment is greatly appreciated
It seems when and element with defined width and overflow:hidden encounters an element that comes earlier in the source code that has been floated and positioned ( I used margins), it acts as if it also had clear:both.
Hi,
The problem with your first example is that the .top div was not containing it’s floated child. With that child float hanging out it was just interacting with the other two floats the way it normally would.
Also, the overflow: hidden; on your floated .bottom divs is not having any influence on your test case. It would just be clipping anything hanging out of them in that case.
If you move that floated .f div out of it’s parent and remove the top margin you will get the same effect as you were seeing, which was typical float snagging.
Now if you nest the float back in the top div and force the parent to contain it all will be as expected. I have also disabled the overflow:hidden; on the 50% width floats to show that it was not having an effect on this
Your second test case with the 50% width floats nested in a widthless overflow parent is setting up a completely different block format.
When an overflow element encounters a float it’s BG color will not slide under the float. It acts as if you had set a margin on that side to keep it off the float.
Here is a test case that demonstrates the same principal in that link I posted above. In this case you will see that it keeps the content div from sliding under the side floats. At the same time the overflow model is also preventing collapsing margins on the <p> tags.
If you remove the overflow from .content you will then see the text wrap around the floats and the BG color slide under the floats. Additionally you will see margins collapse on the <p> tags>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Overflow Box adjoining Floats</title>
<style type="text/css">
h1 {
font-size:1.6em;
text-align:center;
}
.wrap {
width:600px;
margin:0 auto;
overflow:hidden; /*contain child floats*/
background:#CCC;
}
.float {
float:left;
width:150px;
height:200px;
background: red;
}
.rt {float:right;}
.content {
overflow:hidden;/*restrict from sliding under floats*/
background: orange;
}
</style>
</head>
<body>
<h1>Overflow Box adjoining Floats</h1>
<div class="wrap">
<div class="float">Float</div>
<div class="float rt">Float</div>
<div class="content">
<p>Lorem ipsum dolor sit amet consectetuer accumsan Vivamus non vel Aenean. Ac nec sed quis sed Vestibulum neque velit Quisque orci semper. Massa in at consequat nascetur ligula Nam cursus ridiculus ligula ipsum. Nulla at velit mauris pede Lorem et convallis sollicitudin sed Curabitur. Phasellus ac mollis Vestibulum eget rhoncus vitae eros id Curabitur cursus. Auctor tristique lacinia at vitae feugiat Cras elit sagittis amet morbi. Lorem Nam pede ac Nullam.</p>
<p>Nam nascetur pede libero ut lobortis suscipit sit sed orci vitae. Quisque quam ac elit vitae quis urna justo nec wisi pulvinar. Id facilisi id nec Nulla eget at Vivamus id pulvinar id. Orci laoreet Vivamus convallis pellentesque.</p>
<p>A eget Suspendisse laoreet vitae quis Vestibulum nec Sed lobortis suscipit. Eu tellus libero dui quis consequat neque Integer malesuada ut nec. Ligula sit tristique quis quis eros nulla elit ante neque in. </p>
</div>
</div>
</body>
</html>
ray,
I dont want top to contain it’s floated child ( top also is NOT supposed to have overflow.) My post actually DEAL WITH what happens when a float hangs out of it’
s conatiner and interacts with an element that has “overflow” … it seems , that in that case overflow: hidden not only clips contents but gives the element “clear:both”!!!
it also appears, in your follow up post, that it can be used as the equivalent of setting side margins?
ralph
As far as what I am looking for, is nothing specific. I have begun to use “overflow” instead of .clrfx:after to have wrappers of floating elements not collapse. As in the case where you have a “header” and a “content” divs… and the “content” has columns or sidebars… etc. The issue is that if I have any element in the header that are SUPPOSED to hang out of the header area ( as in a logo , or main navigation… for example) so that they rest half in the “header” and half in the “content” area… the overflow prevents this from happening…
When the parent is not containing it’s floats then any floats that follow in the source will interact with it as if it were not in the parent. Floats are removed from the normal flow of the page. That is the point I was trying to make when I took the float out of .top and set it on it’s own. The last 50% wide float in the source was clearing the 1st float because float because there was no longer room for it, hence it dropped down where it found room. It was not actually clearing rather it was dropping.
I pretty much explained right above but that is why I disabled the overflow:hidden on your 50% wide floats. To show you that it was not giving you a clearing effect. You got the same reaction with or without it and it was due to simple float drop. It happens when widths are set on floats and there is not room for the total widths.
Let’s say your 1st float (the one hanging out of top div) was floated left instead of right. Then your last 50% wide left float would drop completely below the other 50% left float.
What I am trying to explain here is that you are seeing float snagging along with float drop, typical float behaviors. It has nothing to do with overflow being set on your 50% wide floats presenting some mysterious clearing effect.
1st float (the one hanging out of top div) floating left instead of right:
With everything I explained above you should understand what was happening.
I think I know what you were trying to do now though. It looks like you were not wanting the last 50% width float to drop below the top float.
If that was the case you could set a negative right margin on the last float so the top float can slide under it.
However, you will need to nest another sandbag (.dummy) float in the last float to allow text to flow around the top float. Things will get unpredictable though without a height on your top div which could have an effect on the dummy float I am using.
You could also nest your top float in the last float and drag it out top with a negative margin. But text in the top div will not honor the float then and it will get concealed. Either way it’s a catch 22.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
.top {
min-height: 150px; /*NO FLOAT CONTAINMENT*/
background: silver;
}
.f {
height: 100px;
width: 100px;
background: orange;
float:right;
margin-top: 80px;
position:relative;
z-index:1;
}
.bottom {
min-height: 150px;
background: pink;
padding-top: 1px;
/*overflow: hidden;*/
width: 50%;
float: left;
}
.rt {
margin-right:-100px;
background:yellow;
}
.dummy {
float:right;
height: 50px;
width: 100px;
}
</style>
</head>
<body>
<div class="top">
<div class="f"></div>
</div>
<div class="bottom">
<p> some content</p>
</div>
<div class="bottom rt">
<div class="dummy"></div>
<p>Lorem ipsum dolor sit amet consectetuer mattis suscipit vitae accumsan tincidunt. A nibh nunc velit sem at libero rutrum nec et ante. Sapien dictumst ac Donec libero elit magnis Nam ante Curabitur nec. Felis Vestibulum pede quis consectetuer ut quis vitae et lacinia ac. Donec sem Nulla non vel urna a non senectus Nunc venenatis. </p>
</div>
</body>
</html>
Has anyone on the forum had found applications for this …
When you apply overflow other than visible to an element then it no longer slides its background under floats but instead forms a rectangular column to the side of the float - almost like another float.
Overflow other than visible creates a new block formatting context (like display:inline-block or absolute elements (which will also contain their floated children in the same way that overflow does). It’s a special property and has special rules and behaviours that don’t apply to other properties.
Note that this is the same behaviour that you get in IE6 when the element is in haslayout mode so for IE6 you just need to force haslayout for a cross browser method.
Overflow acts like another float. It makes sense now, as floats clear each other and “shrink” non floated adjacent elements… they also clear their children… ( am over simplifying… but that the gist of what get)
Ray,
Thanks for the reminding me about how floats (even those wrapped in different containers interact; I LIKE THAT SOLUTION with the dummy float. It may come in handy someday.
I had accomplished what I wanted before my original post. but i like to play around with things when I have them in front of me.
THIS is what I was doing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>
<style>
.hed{ background:silver; height:100px;}
.content{ background: purple; padding:5px 0; overflow:auto }
.col {min-height: 250px; float:left ; width:50%}
.lt {background:yellow;}
.rt {background:pink; overflow:hidden; }
.f{height:100px; width:100px; background:red; float:right;
position:relative; top:55px; right: 25px;
/*margin:55px 25px 0 0;*/
/* Because I was trying to see if I could do this w/o resorting to relative positioning */
}
</style>
<body>
<div class="hed">
<div class="f"> Thic could be a logo or nav or something...</div>
</div>
<div class="content">
<div class="col lt">col</div>
<div class="col rt">col (rayzurs "dummy" idea<br> may come in handy here, some day,<br> but the wrap around <br> was not at issue in this question. )</div>
</div>
</body>
</html>
( I was happy with it, but wondered if I could do the same using margins ( see commented CSS) and god confused by the interactions with the items with “overflow” ( this is why i continued to experiment by removing the rapper, or alternating overflow…)
when in fact what got me confused what how floats interact with with each other and how overflow acts as a sort of float (as Paul said)
I also theorized that it would be possible to do a 3 column layout w/o having the non floated column have margins ( so as not to wrap under the floats) but i wasn’t sure if my implementation was clean and wanted to see that and any other use of the overflow:property … i think it can be quite handy if used right…
Overflow acts like another float. It makes sense now,
Don’t forget the “- almost like another float” part about Paul’s description of it. Don’t be confused in thinking that an overflow box behaves like a float.
originally posted by paul:
When you apply overflow other than visible to an element then it no longer slides its background under floats but instead forms a rectangular column to the side of the float - almost like another float.
He had explained basically the same thing that I did in post #4
originally posted by me:
When an overflow element encounters a float it’s BG color will not slide under the float. It acts as if you had set a margin on that side to keep it off the float.
The thing is, when you set overflow:hidden on an element along with a float it is no longer just [an overflow box interacting with another float]. It is a float interacting with another float. That is why I have kept saying that the overflow on your float will only be clipping content in that case.
( I was happy with it, but wondered if I could do the same using margins ( see commented CSS) and got confused by the interactions with the items with “overflow” ( this is why i continued to experiment by removing the rapper, or alternating overflow…)
Once again, in that code you just posted the overflow on your .col rt div is not doing anything but clipping content because .col rt IS a float. It is not an overflow box only which is adjoining a float.
If you remove the relative positioning from your top float and set the top margin on it we will be right back where we started.
Float drop and float snagging on elements that are floated when there is not enough space to accommodate their total widths.
ALMOST… yeah I forgot that… but I did mean I was oversimplifying the gist.
yeah, I meant to take the overflow out of the .rt rules.
I was just showing the layout I had done which got me to experiment … and thus get confused.
I wasn’t noticing that the “shrinking” actually only occurred on elements with overflow that WEREN’T floated. and that floats…“push” or snag overflow’ed elements.
which is as you described.
And I suppsoe the only reason why I removed the RP is because I try to position with margins over relative when I can , as OLD/Mac versions of IE… have TONS of problems with RP
It looks like you have a good understanding of what the overflow is and isn’t doing now.
The other thing about RP (as I’m sure you know) is the black hole it leaves behind. The element is only moved visually but retains it’s original position in the page.
In post#7 I had mentioned this:
Things will get unpredictable though without a height on your top div which could have an effect on the dummy float I am using.
You could also nest your top float in the last float and drag it out top with a negative margin. But text in the top div will not honor the float then and it will get concealed. Either way it’s a catch 22.
I realize you are just experimenting now but I will go ahead and show you what I meant by that.
If you were able to use a fixed height on your top div you could do something like this code below with a top sandbag and float pusher. If your top div needed to be a fluid height you would need a js floatpusher to set the height dynamically.
This should just about cover every approach to the float residing in between two vertically joining elements.
I set a fluid width wrapper around everything so the top text can wrap around the float when you drag your viewport back and forth.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Float Test</title>
<style type="text/css">
#wrap {
width:70%;
min-width:500px;
margin:0 auto;
}
p {
margin:1em;
text-align:justify;
}
.top {
height: 150px;
overflow:hidden;
background: silver;
}
.pusher {
float:right;
width:4px;
height:86px;
background:blue;
}
.sandbag {
clear:right;
float:right;
width:104px;
height:64px;
margin-left:1em;
background:red;
}
.bottom {
min-height: 150px;
background: palegreen;
padding-top: 1px;
width: 50%;
float: left;
}
.rt {
background:yellow;
}
.f {
width: 100px;
height: 120px;
background: orange;
float:right;
margin: -60px 0 0 1em;
position:relative; /*IE6*/
}
</style>
</head>
<body>
<div id="wrap">
<div class="top">
<b class="pusher"></b><b class="sandbag"></b>
<p>Lorem ipsum dolor sit amet consectetuer mattis suscipit vitae accumsan tincidunt. A nibh nunc velit sem at libero rutrum nec et ante. Sapien dictumst ac Donec libero elit magnis Nam ante Curabitur nec. Felis Vestibulum pede quis consectetuer ut quis vitae et lacinia ac. Donec sem Nulla non vel urna a non senectus Nunc venenatis. </p>
</div>
<div class="bottom">
<p>FLOAT Lorem ipsum dolor sit amet consectetuer mattis suscipit vitae accumsan tincidunt. A nibh nunc velit sem at libero rutrum nec et ante. Sapien dictumst ac Donec libero elit magnis Nam ante Curabitur nec. Felis Vestibulum pede quis consectetuer ut quis vitae et lacinia ac. Donec sem Nulla non vel urna a non senectus Nunc venenatis. </p>
</div>
<div class="bottom rt">
<div class="f">FLOAT</div>
<p>FLOAT Lorem ipsum dolor sit amet consectetuer mattis suscipit vitae accumsan tincidunt. A nibh nunc velit sem at libero rutrum nec et ante. Sapien dictumst ac Donec libero elit magnis Nam ante Curabitur nec. Felis Vestibulum pede quis consectetuer ut quis vitae et lacinia ac. Donec sem Nulla non vel urna a non senectus Nunc venenatis. </p>
</div>
</div>
</body>
</html>
)