CSS3 misunderstanding of property overflow
I've always thought that changing the overflow
style property of an element would only determine what to do with the content outside of the element's bounds, not decide if the children are inside or outside.
I have this code:
#container {
border: 2px solid red;
overflow: hidden;
}
#container .left {
width: 50%;
float: left;
}
#container .right {
width: 50%;
float: right;
}
<div id="container">
<h1>container text</h1>
<div class="left">
<h2>left text</h2>
</div>
<div class="right">
<h2>right text</h2>
</div>
</div>
when i change overflow
from hidden
to visible
, children .left
and .right
end up outside of their parent field, which contrasts with when the property is overflow
set to hidden
. Why overflow
does the property behave this way?
source to share
because you are using float
s, so you need to clear float
s
more on clearing clicks and floats
Snippet with ( overflow:visible
):
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
#container {
border: 2px solid red;
overflow: visible;
}
#container .left {
width: 50%;
float: left;
}
#container .right {
width: 50%;
float: right;
}
<div id="container" class="cf">
<h1>container text</h1>
<div class="left">
<h2>left text</h2>
</div>
<div class="right">
<h2>right text</h2>
</div>
</div>
In this snippet I have used micro clearfix
source to share