Found an interesting browser behaviour. Given the following code:
div {
padding: 5px 10px;
color: #FFF;
}
.a {
float: left;
/* fix either set width or remove float */
background: goldenrod;
}
.b {
position: relative;
overflow: hidden;
background: #392;
}
.b div {
width: 20000em;
background: #942;
}
and
<DIV class="a">
<DIV class="b">
<DIV>Content</DIV>
</DIV>
</DIV>
I would expect the overflow: hidden to hide/crop the div to the viewport, but the parent float is honoured instead and the page is WIIIIIIIDE.
Anyone know if this a feature or a browser bug?
I know that you should add a width to a float ... but this felt weird to me. To stop the behaviour, either remove the float on .a or add max-width: 100% or similar.
[Note: found in html spaghetti mixing ektron, jcarousel with bootstrap, this is simplest test case to reproduce issue.]
Demo at http://codepen.io/elliz/pen/wteya
Related
I've been having a very weird CSS issue. Some of my pages have displayed an unexplained "space" between element. Inspecting the code shows that this space does not belong to any element.
I've narrowed it down, and I think I know why this issue is happening. But I wanted to know, under the hood, why it's happening.
The issue, I think, is that min-height: 50px in the #outer selector adds the bottom margin of #inner below #outer, which results in an the unexplained space mentioned above. If it were to be replaced with height: 50px the space would disappear.
This happens on Chrome but not FireFox.
My theory is that Chrome's CSS lays out the elements first then checks if min-height requirement is met. If not, then it extends the height of the div, pushing the "unexplained space" along with it. It essential copied, or inherited, the bottom margin of the child element. I think this only happens to the bottom margin though.
I've tried two tests of this theory, adding padding: 1px; and adding overflow: hidden; they both cause the height of the div to include it's child and thus gets rid of the issue. Although, I think in the case of overflow: hidden it's more cutting off the overflown content.
But I'm no CSS expert, all this is just speculation on my part, which is why I wanted to pose this as a question :)
Here's the code
#outer {
background-color: blue;
min-height: 100px;
}
#inner {
background-color: red;
height: 50px;
margin-bottom: 50px;
}
#bottom {
background-color: green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
<div id="bottom">
</div>
This occurs due to margin collapsing - specifically the margin-bottom of inner collapses to become the margin-bottom of the outer element.
Solution:
Give a border to the outer element to prevent the margin collapsing - see demo below:
#outer {
background-color: blue;
min-height: 100px;
border: 1px solid blue;
}
#inner {
background-color: red;
height: 50px;
margin-bottom: 50px;
}
#bottom {
background-color: green;
height: 50px;
}
<div id="outer">
<div id="inner">
</div>
</div>
<div id="bottom">
</div>
So I have this strange problem, I have two div on one line (display:inline-block) and the first div appears on hover in a sliding effect. For this animation I need to set overflow:hidden, but it seems to break the my page.
I made a demo on JSFiddle
Have you ever face this problem ?
Thank you
NOTE: IE8+ compatible hints or solutions would be a huge plus
Code
HTML
<div class="container">
<div class="hello NoOverflow">Hello</div><div class="textWrapper">mytext</div>
</div>
<br>
<div class="container">
<div class="hello">Hello</div><div class="textWrapper">mytext</div>
</div>
CSS
.container {
background: #000;
color: #FFF;
}
.hello {
display: inline-block;
width: 40px;
background: #F00;
}
.textWrapper {
display: inline-block;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
EDIT
For those who want the hover animation : JSFiddle Updated
You will see my problem by hovering the 2nd container (the JQuery "animate" call add a "overflow: hidden" property)
You need to specify vertical-align: top for your inline-block child elements.
When you specify overflow: hidden, you are triggering a new block formatting context, and its bottom edge will align with the baseline of the following inline element.
See demo: http://jsfiddle.net/audetwebdesign/7SZkN/
The relevant CSS to modify is:
.NoOverflow {
overflow: hidden;
vertical-align: top;
}
There is pretty much CSS2 so it should work fine in IE8+ (any browser that supports inline blocks).
Have you tried to float them left.
.container {
background: #000;
color: #FFF;
}
.hello {
/*display: inline-block;*/
float:left;
width: 40px;
background: #F00;
}
.textWrapper {
/*display: inline-block;*/
float:left;
background: #090;
}
.NoOverflow {
overflow: hidden;
}
I am trying to get a centered in the space that is left empty by a sidebar. This is how I'd like it to look like:
I actually managed to make this work OK for most browsers using margin: auto for the div in question, while setting overflow: hidden:
Fiddle here
CSS
#header {
height: 50px;
background: #224444;
color: #fff;
}
#container div {
padding: 1em;
}
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
}
#sidebar {
float: right;
width: 200px;
background: #aaa;
height: 300px;
}
HTML
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content">
Centered Content
(Works everywhere but on IE9)
</div>
</div>
However, it does not work with IE9. It is strange as IE8 works OK!
I am running out of ideas, so I thought that maybe someone knows what is going on? The trick seems to work perfectly everywhere else.
NOTE: Please note that the content div should be flexible as it is in the demo. As the available space decreases, it should change size and squeeze in.
Isolate the centering from the floating
This affects IE9/10.
It works fine if the floated element is removed, or if width is used instead of max-width. The presence of floated content, combined with the use of margin:auto and max-width instead of width, appears to be confusing IE9+.
To fix this, put the centered content in a wrapper div, so that the centering of the content can be separated from the floating of the sidebar. In other words, too much is happening layout-wise in a single div, more than IE9+ can handle. So split up the #content div into two separate divs.
#header {
height: 50px;
padding: 1em;
background: #224444;
color: #fff;
}
#content-wrapper {
overflow: hidden;
}
#content {
max-width: 400px;
margin: auto;
padding: 1em;
background: #ddd;
height: 300px;
}
#sidebar {
float: right;
width: 200px;
padding: 1em;
background: #aaa;
height: 300px;
}
<div id="container">
<div id="header">
PAGE HEADER
</div>
<div id="sidebar">
Sidebar
</div>
<div id="content-wrapper">
<div id="content">
Centered Content
</div>
</div>
</div>
This tested fine in IE7/8/9/10. On a side note, because a wrapper div was added, the padding: 1em; now has to be added to each element individually.
IE is notorious for not working without proper doctypes.
Try adding the HTML5 one
<!DOCTYPE html>
Floats are a tricky business. Strictly speaking, they're only supposed to affect the inline content that flows around them, so margins acts like the floats aren't even there.
Try this instead:
#container {text-align:center}
#content {display:inline-block;text-align:left}
This should make the content box act like an inline element, and therefore appear centered in the space.
As far as I remeber I've always problems with margin:0 auto because I didn't specify width property.
So everytime you want use margin:auto you propably should write this:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:500px;
}
or in percentage:
#content {
max-width: 400px;
margin: auto;
background: #ddd;
height: 300px;
overflow: hidden;
width:30%;
}
EDIT
If you want to create flexible layout please take a look to bootstrap and fluid grids.
Example
If the adjacent element of a parent floating, the parent does not feel the width of the element, if it is dynamic. In chrome and opera works fine.
<div class="b-wrap">
<div class="b-content">
<div class="b-rect-left"></div>
<div class="b-rect-right"></div>
<div class="b-child-cont">джигурдаололо</div>
</div>
</div>
.b-wrap {
background-color: red;
height: 50px;
float: left;
}
.b-content {
margin: 5px;
overflow: hidden;
}
.b-rect-left {
width: 40px;
height: 40px;
float: left;
background-color: orange;
}
.b-rect-right {
width: 30px;
height: 30px;
float: right;
background-color: green;
}
.b-child-cont {
overflow: hidden;
}
Firefox calculated the width of an element that contains floats differently from Chrome. I don't know why.
However, what seems to be happening is the following.
The actual content in your snippet is in b-child-cont, a non-floated element. b-child-cont determines the width of b-content since the two other elements are (b-rect-left and b-rect-right) are floated and do not factor into determining the width of the content. In turn, the width of b-content sets the width of b-wrap, because b-wrap is floated and takes on the width of its child elements.
You as a designer and developer, need to allow some space for the two floated elements. You can do this in many ways. I will give two examples.
(1) Add left and right margins to b-child-cont:
.b-child-cont {
overflow: hidden;
background-color: yellow;
margin-left: 40px;
margin-right: 30px;
}
(Note: I added a background color to show the extend of the element.) The 40px and 30px values are based on the widths of the left and right square elements respectively.
(2) You can also specify a with to the parent element containing the floats:
.b-child-cont {
overflow: hidden;
background-color: yellow;
text-align: center;
}
.b-content {
width: 30em;
}
In this case, I set the with of b-content to 30em (you can adjust this accordingly) and I centered the text in b-child-cont.
You have come across a cross-browser discrepancy in how the CSS box model is calculated. Once you are aware of it, you need to design around it, but that is not too hard to do.
Fiddle Reference: http://jsfiddle.net/audetwebdesign/dzK73
Just add this firefox exception
#-moz-document url-prefix() {
.b-wrap{width:175px;}
}
I already read a lot of posts about IE 11 with display: flex and min-height, but didn't find my answer.
I have a normal <div> with a min-height: 100vh;. In that <div> I have another element with a margin-bottom: 5px;. Now the whole outer <div> has a scrollbar and a transparent border at the bottom of 5px.
When I increase the margin, the gap at the bottom will increase the same.
Example:
<div class="layout">
<div class="panel">
Some content
</div>
</div>
body {
margin: 0;
}
.layout {
min-height: 100vh;
background: orange;
}
.panel {
margin-bottom: 40px;
background: white;
border-radius: 5px;
padding: 5px;
}
<div class="layout">
<div class="panel">
Panel
</div>
</div>
Now I made the code snipper, I see it also going wrong in Chrome.
I hope you understand me, but if you need more info please ask. I hope to find an answer!
Thank you,
Ronald.
Your issue is because of margin collapsing and it could be fixed in different ways.
Depending on your case, easiest is to use overflow: hidden for .layout:
.layout {
min-height: 100vh;
background: orange;
overflow: hidden;
}
You could also use padding-bottom on .layout instead of margin-bottom on .panel to avoid the issue with margins.
Another option could be clearfixing the .layout like so:
.layout:before,
.layout:after {
content: ' ';
display: table;
}