Consider the following:
<div style='float: left; width: 50%'>content</div>
<div style='float: right; width: 50%'>content</div>
<div style='clear: both; margin-top: 50px'>content</div>
Why does margin-top doesn't work here? The third element is still glued to the first two elements.
You need to try to add margin-bottom to the floats.
Or you can try to add
<div style='overflow:hidden'>
<div style='float: left; width: 50%'>content</div>
<div style='float: right; width: 50%'>content</div>
<div style='clear: both; margin-top: 50px'>content</div>
JSFIDDLE DEMO
From the W3C specs
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.
Adjoining vertical margins collapse [...]
Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
top margin of a box and top margin of its first in-flow child
check it over here may be you need the same
https://jsfiddle.net/chaitanyaah/yychtp8t/
<div style='overflow:hidden'>
<div style='float: left; width: 50%;background:#bbb'>content</div>
<div style='float: right; width: 49%;background:#bbb'>content</div>
<div style='clear: both; margin-top: 0px;border:2px solid #ddd'>content</div>
</div>
Related
I'm currently trying to create a two column layout where the left column is floated and the right column restrains the float by forming a new block formatting context. That works. Later, I try to put some visible space between the left column and the content of right column. If I set left padding on the right column, it works. I also try to replace the left padding with left margin on the right column, and think they would have the same effect. However, to my surprise, the left margin is not working at all
I reproduce the problem with the following code. Notice that the example in the middle, setting the left margin on the right column does not really push it away from the left column
* {
margin: 0;
padding: 0;
}
.container {
height: 50px;
line-height: 50px;
width: 500px;
}
.container + .container {
margin-top: 20px
}
.left {
float: left;
width: 150px;
height: 100%;
background: orange;
text-align: center;
}
.right {
overflow: auto;
background: skyblue;
height: 100%;
}
.with-padding {
padding-left: 30px;
}
.with-margin {
margin-left: 30px;
}
<div class="container">
<div class="left">left column, floated</div>
<div class="right with-padding">
<p>left padding works</p>
</div>
</div>
<div class="container">
<div class="left">left column, floated</div>
<div class="right with-margin">
<p>left margin dost not work</p>
</div>
</div>
<div class="container">
<div class="left">left column, floated</div>
<div class="right">
<div class="with-margin">
<p>left margin works on the wrapper div</p>
</div>
</div>
</div>
I did search for this topic on the internet but don't find too much relevant information. I suspect this might be related to the concept of block formatting context (BFC). If I understand correctly, margin represents distance between the target box's outer edge and containing BFC's inner border.
If we set margin on a box which itself forms its own BFC, then margin shouldn't work? So in the third example, I place the text into an extra wrapper and set margin on that wrapper, and it looks like left margin work again. However, this is just my guess.
The critical point here is that
The border box of ... an element in the normal flow that establishes a new block formatting context (such as an element with overflow other than visible) must not overlap the margin box of any floats ...
CSS 2.2 Section 9.5 Floats
So the margin, which lies outside the border box, of such a BFC can (and in your second case does) overlap with the float, but padding, which lies inside the border box, cannot.
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>
Margins of blocks elements collapse, but not inline-blocks.
Is there a way to force inline-blocks margins to collapse?
.wrapper {
position: relative;
float: left;
width: 100px;
margin: 10px;
}
.wrapper .el {
display: inline-block;
width: 100%;
height: 20px;
background: #000;
margin: 10px 0;
}
.wrapper.block .el { display: block; }
<div class="wrapper">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
<div class="wrapper block">
<div class="el"></div>
<div class="el"></div>
<div class="el"></div>
</div>
Anyone have an idea?
I have already read the documentation on MDN.
This is documented in the spec that margins of inline-block elements do not collapse:
8.3.1 Collapsing margins
Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Margins of elements that establish new block formatting contexts (such as floats and elements with 'overflow' other than 'visible') do
not collapse with their in-flow children.
Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
Margins of inline-block boxes do not collapse (not even with their in-flow children).
...
Therefore the answer is No. You probably need to alter the margins of the element.
The answer is "no" because that's not how inline boxes work so it can't be forced as you asked for. Anything else would be just manipulating the margins of elements which is only a trick or hack.
If I get you right you want to remove that extra margin that inline-block elements have assign font-size: 0; to the parent element of the corresponding div.
Check this post:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
I have 2 columns of divs (left and right) contained in the parent div. I want the parent div height automatically adjusts when either left or right div height expand. The problem I have now is that the height of parent div just expands when the left expand, it does not work for the right. I have height:auto for all divs.
Are there anyone have solution?
you can do this by float for example
<div class="parent" style="float:left">
<div class="child" style="float:left"></div>
<div class="child" style="float:left"></div>
</div>
You are probably using float to move the right div to the right side. Floats do not automatically adjust the parents height, you must add the following code right before the end of the parent div.
<br style="clear:both;" />
This will mark the end of all floats on the same level.
You are probably floating your divs to keep them next to each other. By doing so, you 'remove these divs from the flow', i.e. the parent does not take them as content anymore.
You can 'by-pass' this effect by giving overflow: hidden to the parent or by adding a clear div.
Example w/ overflow: http://jsfiddle.net/BramVanroy/LJTGh/
Important CSS:
#wrapper {
height: auto;
width: 77%;
margin: 20px auto;
overflow: hidden; /*THIS IS IMPORTANT */
border: 1px solid;
}
OR
Example w/ clear: http://jsfiddle.net/BramVanroy/LJTGh/1/
Important CSS:
.clear {clear: both;}
The first option needs a line more of CSS, the second one a line more of HTML and a line more of CSS.
I have a div that holds some text, it has a background with a border, but for some reason the box is not expanding to the text, even with overflow: auto; here is my script for the box as well as a picture:
.box { background: #ffdcba; border: 1px solid #f78d25; display: block; clear: both; margin: 4px 0px; padding-left: 15px; overflow: auto; }
the divs inside are just floating, left and right, and have display: inline on them. heres a picture:
http://i45.tinypic.com/2woj1br.gif
A floated box will not expand to fit its contents. You need to add a clearing element after your content. <br> is usually good.
YOu don't specify the exact construction of the HTML, but I"m asssuming you've got something like this:
<div class="box">
<div style="float: left">test subject></div>
<div style="float: right">
<div>ASD</div>
etc...
</div>
</div>
Floating elements removes them from the regular flow and will cause the "overflow" you are seeing. You need to add a non-floated element below the floated parts to force the containing div.box to "expand" to contain the floats:
<div class="box">
<div style="blah blah" ....
etc....
<br style="clear: both" />
</div>
As well, the overflow: auto will not have any effect on your .box style, because it does not specify any height or width - it will naturally just expand to contain whatever content you put in there. To force a scrollbar to appear, you need to put in either height or width styling, and enough content to exceed either of the limits.