I have two divs with display:inline block next to each other, however the 2nd one's width can change to be so long that it will fall under the first div. That is fine, but the problem is that there is no vertical space between the 2 divs when this happens. I can solve this by adding margin-bottom to the first div, but then this causes the 2nd div to be a bit lower even when it is sitting to the right of the first div.
What browser are you using? As you can see below, two inline-block divs retain a margin when one slips below the other. (In fact, getting rid of the margin between inline-block elements is a bit tricky, but that's another question.)
#container {
width: 200px;
}
#top {
display: inline-block;
width: 100px;
height: 100px;
background: red;
}
#right {
display: inline-block;
width: 150px;
height: 100px;
background: blue;
}
<div id="container">
<div id="top"></div><div id="right"></div>
</div>
What you want is "vertical-align:top;".
There are multiple ways posted here to uncollapse a vertical PARENT margin, but nothing about uncollapsing vertical margins of adjacent elements. The only solution I found was in this answer (back in 2009):
<div style="overflow: hidden; height: 0px; width: 0px;"> </div>
Almost 7 years passed since there. Is some better way to do this (possibly using some CSS3)?
Basically, suppose you have: http://jsfiddle.net/ok2u3o3c/
<div class="one"></div>
<div class="two"></div>
div {
width: 300px;
height: 200px;
}
.one {
margin-bottom: 10px;
background-color: blue;
}
.two {
margin-top: 20px;
background-color: red;
}
What would be the most elegant way to make the distance between these 2 boxes 30px instead of 20px (where the first margin contributes 10px and doesn't collapses)?
Let's start with the relevant documentation explaining the behavior of collapsing margins:
8 Box model - 8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
The following rules apply, which means that there are a things that you can do to prevent the margins from collapsing for sibling elements:
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children)
Therefore if you float the elements with collapsing margins, they will no longer collapse:
.collapsing-margins {
margin: 100px 0;
background: #f00;
float: left;
width: 100%;
}
<div class="parent">
<div class="collapsing-margins">Element</div>
<div class="collapsing-margins">Element</div>
</div>
Margins of inline-block boxes do not collapse (not even with their in-flow children).
Therefore you could also add change the display of the elements to inline-block:
.collapsing-margins {
margin: 100px 0;
background: #f00;
display: inline-block;
width: 100%;
}
<div class="parent">
<div class="collapsing-margins">Element</div>
<div class="collapsing-margins">Element</div>
</div>
I'd like to collapse the left and right margins of a block through its parent.
I cannot change the style of the child, because its margin is unknown. It can be anything. I want the parent's background to not show in the area of the child's margins. Vertical margins behave this way, and I want to find a way to make horizontal margins behave this way.
For example (I'd like the red not to be visible at all):
.a {
background: red;
margin: 10px;
}
.b {
margin: 10px;
height: 100px;
background: blue;
}
body {
background: yellow;
}
<div class="a">
<div class="b">
x
</div>
</div>
According to the docs, left/right margin collapse through only happens if block-progression is lr or rl (which isn't really a thing browsers support it seems).
http://www.w3.org/TR/css3-box/#collapsing-margins
Is there another way?
I am trying to understand why the .item-wrap in the css below only calculates it's width *as if .floatleft2 wasn't there, and yet the .items contained by .item-wrap clearly are aware that .floatleft2 is there.
I want the .containingbox to "shrink wrap" the content, but not for the .items to wrap "prematurely" i.e. while there is still extra screen space. (see 'working' fix below).
I have already found the workaround, but what specification in CSS causes this interaction between .floatleft2, .item-wrap, and .item such that the .item-wrap width isn't wide enough to incorporate all the .items?
jsfiddle demo (code reproduced below)
jsfiddle demo with 'working' inline fix
<body>
<h1>float:left on .containingbox, with item-wrap, with floatleft2, causes premature wrapping of .item</h1>
<div class="containingbox">
<div class="floatleft2"></div>
<div class="item-wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</body>
body {
margin: 20px;
padding: 0;
font: normal 85% arial, helvetica, sans-serif;
color: #000;
background-color: #fff;
}
.containingbox {
height: 200px;
border: 1px solid #000;
float: left;
}
.item-wrap {
border: 1px solid #0FC;
height: 3px;
}
.item {
border: 1px solid #F09;
width: 50px;
float: left;
position: relative;
margin: 0 10px 0 0;
height: 75px;
}
.item::before { content: "item"; position: absolute; }
.floatleft2 {
height: 75px;
background-color: #000;
border: 1px solid #000;
float: left;
margin: 0 10px;
display: block;
width: 50px;
}
When you float .floatleft2 but not .item-wrap, .floatleft2 is taken out of the normal flow of the container box (which gets its own block formatting context from being floated itself), and .item-wrap is laid out as though .floatleft2 were not there. Since .item-wrap is not floated, it behaves like a regular block-level element, using the auto width and stretching to fit the container as per section 10.3.3.
The reason why the container is sized horizontally to just fit .item-wrap and its floated items is because, when .floatleft2 is taken out of the normal flow of the container, the container no longer needs to account for the size of .floatleft2. It only accounts for the contents of .item-wrap, which are themselves also floated.
The width of a floating element, when no explicit width is specified (it uses the auto width), is shrink-to-fit, according to section 10.3.5. CSS2.1 does not say how to implement shrink-to-fit, but it does say that an implementation should use shrink-to-fit. In this case, the container is shrunk to just the minimum width needed to fit the floating items on one line. The width of .item-wrap is never relevant except that it should stretch to fit within the bounds established by the container, as mentioned above.
What happens then is that when .floatleft2 is introduced, the floating items float to the left of that element (the same fundamental behavior you see when floating the items themselves), regardless of the layout of .item-wrap or the container. This causes some of the items to wrap to the next line since neither container element changes its size to account for .floatleft2.
you are making the div class from block level element to inline element.
you should use float:left; and remove the display:inline
.item-wrap {
/*display: inline;*/
float: left;
border: 1px solid #0FC;
height: 3px;
}
Here is the Working Demo. http://jsbin.com/vicusesu/1/edit
It is because you have float: left on .float-left2 and .item but not on .item-wrap. This effectively removes all floated items from item-wrap (they are floated) while it still keeps the same width as if they were there.
If you add a float (left or right) to your .item-wrap you will not have this issue.
How does the CSS Block Formatting Context work?
CSS2.1 specifications says that in a block formatting context, boxes are laid out vertically, starting at the top. This happens even if there are floated elements in the way, except if the block box established a new block formatting context. As we know, when browsers render block boxes in a block formatting context, the floated element is omitted, why does establishing a new block formatting context work?
How are boxes (block boxes and inline boxes) laid out in the normal flow?
I read somewhere that block elements generate block boxes, but floating elements are ignored when a user agent draws box and take them into account when they fill out content. Whilst floating elements will overlap other elements's boundary of the boxes, the solution is establishing a new block formatting context for the overlapped elements using overflow:hidden.
"New block formatting context is still block formatting", so when drawing a box, it will also treat the floating element as if it doesn't exit. Is that right or have I misunderstood "new block formatting context?"
Update:more questions
By saying "It's this behaviour that's useful for columnar style layouts. The main use of it however is to stop floats, say in a "main content" div, actually clearing floated side columns, i.e. floats that appear earlier in the source code."
I don't understand the meaning, I will provide an example, maybe you will understand me.
.content {
background: #eee;
color #000;
border: 3px solid #444;
width: 500px;
height: 200px;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: right;
}
p {
background: #444;
color: #fff;
}
<div class="content">
<h3>This is a content box</h3>
<p>It contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float. This is normal behaviour.</p>
<div class="float">floated box</div>
</div>
I thought the floating box should float to the top of the containg block-the div with class content. Besides, if the floating box appears earlier in the markup, then it will display what I think it should be.
.content {
background: #eee;
color #000;
border: 3px solid #444;
width: 500px;
height: 200px;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: right;
}
p {
background: #444;
color: #fff;
}
<div class="content">
<div class="float">floated box</div>
<h3>This is a content box</h3>
<p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>
How can we explain this? Can we use "block formatting context and inline formatting context" to explain it?
Block Formatting Contexts
Floats, absolutely positioned
elements, block containers (such as
inline-blocks, table-cells, and
table-captions) that are not block
boxes, and block boxes with 'overflow'
other than 'visible' (except when that
value has been propagated to the
viewport) establish new block formatting contexts for their contents.
With my bold, it's the establish bit that is important
What this means is that the element you use overflow (anything other than visible) or float or inline-block..etc on becomes responsible for the layout of its child elements. It's the child elements which are then "contained", whether that's floats or collapsing margins they should be wholly contained by their bounding parent.
In a block formatting context, each
box's left outer edge touches the left
edge of the containing block (for
right-to-left formatting, right edges
touch)
What the above line means:
Because a box can only be rectangular and not irregular shaped this means a new block formatting context between two floats (or even beside one) will not wrap around neighbouring side floats. The inner, child boxes can only extend as far as to touch their parents left (or right in RTL) edge. It's this behaviour that's useful for columnar style layouts. The main use of it however is to stop floats, say in a "main content" div, actually clearing floated side columns, i.e. floats that appear earlier in the source code.
Float Clearance
In normal circumstances floats are supposed to clear all previous floated elements, that's previously floated in the whole source code, not just your displayed "column"
The telling quote from the "float clearance specs" is:
This property indicates which sides of
an element's box(es) may not be
adjacent to an earlier floating box.
The 'clear' property does not consider
floats inside the element itself or in other block formatting contexts
So say you have a three column layout where the left and right columns are floated left and right respectively, the side columns are now in new Block Formatting Contexts, because they are floated (remember float is also one of the properties that establish a new BFC), so you can happily float list elements inside them and they only clear floats which are already inside the side columns they no longer care about floats previously in the source code
##To make the main content a new Block Formatting Context or not?
Now that middle column, you can simply margin it from both sides so that it appears to sit neatly between the two side floated columns and take the remaining width, a common way to get desired width if the centre column is "fluid" - which will be fine until you need to use floats/clearance inside your content div (a common occurrence for those using "clearfix" hacks or templates including them)
Take this very simple code:
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
margin: 0 200px;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated">this a floated box</div>
</div>
It produces the following:
In general this is fine, especially if you have no background colours or internal (in the main content) floats - notice the floats are fine (not cleared yet) they're doing probably what you except them to but they, the H3's top margin and the p's bottom margin are not actually really contained by the content div (lightgrey background).
So to the same simple margined scenario of above code add:
.clear-r {clear: right;}
to the CSS, and change the second HTML floated box to:
<div class="floated clear-r"> this a floated cleared box</div>
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
margin: 0 200px;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated clear-r">this a floated cleared box</div>
</div>
This time you get this:
The second float is clearing the right side but it's clearing the whole height of the right column. The right column is floated earlier in the source code so it's clearing it as told! Probably not the desired effect though, also note the h3 and p margins are still collapsed (not contained).
###Make it establish a Block Formatting Context, for the sake of the children!
and finally make the main content column take responsibility - become a Block Formatting Context - for its contents : remove margin: 0 200px; from the main content CSS and ADD overflow: hidden; and you get this:
#left-col {
border: 1px solid #000;
width: 180px;
float: left;
}
#right-col {
border: 1px solid #000;
width: 180px;
float: right;
height: 200px;
}
#content {
background: #eee;
overflow: hidden;
}
.floated {
float: right;
width: 180px;
height: 100px;
background: #dad;
}
.clear-r {
clear: right;
}
<div id="left-col">left column</div>
<div id="right-col">right column</div>
<div id="content">
<h3>Main Content</h3>
<p>Lorem ipsum etc..</p>
<div class="floated">this a floated box</div>
<div class="floated clear-r">this a floated cleared box</div>
</div>
This is probably much more like what you would expect to happen, note now the floats are contained, they clear properly ignoring the right side column, and also the h3 and p margins are contained instead of collapsed.
With the extensive use of resets these days the margins are less noticeable (and IE still doesn't get them quite right) however what just happened to the centre "main content" is that it became a Block Formatting Context and is now responsible for its own child (descendant) elements. It's actually very similar to Microsoft's early days notion of hasLayout, it uses the same properties display: inline-block, float, and overflow anything other than visible, and of course table cells always have layout.. it is however without the bugs ;)
##Update: re more information in question:
When you say "but floating elements are ignored when user agent draws box and take them into account when they fill out content."
Yes floats normally overlay their container boxes, is that what you mean about parent boundaries? When a block element is drawn and it contains a float the block parent itself is drawn as a rectangle under the float and it is the "inline anonymous boxes" or simply "line boxes" of the other child elements that are shortened to make room for the float
Take this code:
#content {
background: #eee;
color #000;
border: 3px solid #444;
}
.float {
background: rgba(0, 0, 255, 0.5);
border: 1px solid #00f;
width: 150px;
height: 150px;
float: left;
margin: 10px;
}
p {
background: #444;
color: #fff;
}
<div id="content">
<div class="float">floated box</div>
<h3>This is a content box</h3>
<p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the <h3> and <p> <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>
Which produces this:
You see that the parent element doesn't actually contain the float, as in it doesn't wrap it entirely.. the float is simply floating on top of the content - if you were to keep adding content to the div it would eventually wrap underneath the float because there would be no need for the (anonymous) "line boxes" of the p element to shorten themselves any more.
I've coloured the paragraph element so you can see that it too actually goes under the float, the darkgray background is where the paragraph starts, the white text is where the "anonymous line box" starts - it's only actually them that "make room" for the float, unless you tell it otherwise (i.e. you change the context)
Again referring to the above picture, if you were to margin the left side of thep element, yes it will stop the text wrapping under the bottom of the float because the "line boxes" (the white text) will only touch the left edge of their container, and you will bring the coloured background of the p to the right, clear of the float, but you won't have changed the behaviour of the p's formatting context. Like the centre column in the first picture way above ;)