This question already has answers here:
CSS Margin Collapsing
(2 answers)
Closed 8 years ago.
Check this extremely simple html structure. One div inside another, the inner (green) div has margin-top: 100px, the outer (red) div has no margin-top. The outer div is twice (200px) as high as the inner div (100px).
So what would you expect the result to look like? If you're like me, you get the opposite of what you'd naturally expect to get.
My question is NOT how to prevent this. My question is WHY ist this happening this way consistently across all browsers? I mean, this obviously must be the way it's inteded to work, but to me it's strongly counter-intuitive.
.red {
background-color: #a00;
height: 200px;
}
.green {
background-color: #0a0;
margin-top: 100px;
height: 100px;
}
<div class="red">
<div class="green"></div>
</div>
http://jsfiddle.net/connexo/7txnoj7m/
Its normal way of rendering and it is called margin collapsing. More you can read here
I think its a parent/child dependency issue. The position of both Divs are default : 'static'. So the red Div is behind the green Div which has the margin-top.
Related
This question already has an answer here:
How does padding percentage work?
(1 answer)
Closed 3 years ago.
I wonder if this is very stupid to ask but I am asking anyway because I haven't found the answer anywhere to my satisfaction yet.
I am trying to make a responsive page where I want to define padding of a div called content which contains another div as "text" and is sitting inside another div element called container which has predefined height and width and position: relative. Now the problem is that I defined padding: 45% 45%; and it works very well on the width by taking the root value of the parent container but it flush outside the parent when it comes to height
.container
{
box-sizing: border-box;
position: relative;
border: 1px;
height: 100px;
width: 600px;
margin:0 auto;
}
.content{
background-color: skyblue;
padding: 43% 43%;
}
#textlogo {
font-size: 4em;
}
<div class="container">
<div class="content">
<div id="textlogo">Text</div>
</div> </div>
Your issue seems to be with the box-sizing,
Set box-sizing: padding-box, this way the browse calculates the total width of the element together with the padding and it will clear off any overlay. Your padding is also a bit high and it's causing the problem.
You must note that the flushing is likely caused by your font-size: 4em. This is a large font and it will force the content div to extend in order to accommodate it #textlogo content..
You should very rarely use the padding property in CSS. Going all the way back to Internet Explorer 4 margin worked correctly.
Use margin on the child element instead of padding on the parent. If you use padding on the parent it automatically effects all the child elements. You can "blanket" apply margin to all child elements by using #parent > div selector in example and then cascade secondary margin for individual elements you need to adjust.
You should use padding if there are no child elements or you're dealing with bugs in rendering engines or the standards themselves (e.g. when implied "logic" is used instead of direct (actual) logic).
As Mosia mentioned there is the box-sizing property and while support at this point is pretty much universal if you want to learn CSS the way it was originally intended I wouldn't recommend that shortcut as it will rob you from a true understanding of the code.
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
Here's the code: https://jsfiddle.net/ohewuanx/
I'm working on part of a CSS lib with a react implementation, implementing a progress bar. It worked great in tests on the css side, but as soon as I implemented it in react, the actual filled bar was outside of its container. It sits a few pixels down. I realized the css tests didn't have <!DOCTYPE html> in the test files. Adding it broke the style, or revealed my already broken style.
I managed to fix it by swapping out
.progress-bar > * {
background: #008be1;
height: 4px;
display: inline-block;
}
for
.progress-bar > * {
background: #008be1;
height: 4px;
float: left;
}
but I have no idea why that fixed it, or why it didn't work in the first place. Heights are given, it's an inline-block element inside a block parent. There are no margins or paddings present. Why is the child div offset instead of being contained in the parent?
Remove both display:inline-block and float from that class. Why even add those
.progress-bar > * {
background: #008be1;
height: 4px;
}
This question already has answers here:
CSS margin terror; Margin adds space outside parent element [duplicate]
(7 answers)
Closed 4 years ago.
Learning CSS in earnest, and a bit confused.
I have a table in a div.
.bigdiv {
background-color: red;
padding: 10px;
}
table {
background-color: aquamarine;
margin-left: 300px;
margin-bottom: 100px;
padding: 10px;
}
<div class="bigdiv">
<table>
<tr>
<td>foo</td>
</tr>
</table>
</div>
which works as I expect, with a big 110px red swath below the aquamarine box.
But when I take the padding out of the div, the margin-bottom overflows the div, and the visual appearance is an aquamarine box at the edge of a red div.
I'd like to understand the rules behind this behavior. Is this something specific about divs, or does the container generally have to have a nonzero padding in order for the content's margin to appear in the container?
Margins collapse which means when you have an elemeht with a bottom margin and another one with a top margin below, it will only display the biggest one.
This is true for parent/child margins, too. Only the biggest margin is displayed and that outside the parent.
There are 2 css workarounds:
overflow:auto
padding:1px
Both css rules can be added to the parent to solve the problem.
For further examples and more explanation you can find something e.g. here:
https://css-tricks.com/what-you-should-know-about-collapsing-margins/
The keyword you need to search for is "margin collapsing"
This question already has answers here:
Why doesn't the height of a container element increase if it contains floated elements?
(7 answers)
Closed 8 years ago.
Good day everyone. I'm a novice with css and I'm trying to float two div tags within one div tag but I'm getting the following
I gave the parent div tag a light grey background so I know something is wrong somewhere as the background has disappeared just after I floated the div tags.
Here's my css below.
.menu.container {
width: 100%;
background-color: #F0F0F0;
}
.category {
float: left;
}
Thanks a lot for your help!
when floating elements the parent container does not recieve information about width or height of the floated elements.
if you just want to align sports and News in a horizinal manner then try the following:
.category {
display:inline-block;
}
"display:inline-block" forms a block element that be on one line with another.
This question already has answers here:
How to force child div to be 100% of parent div's height without specifying parent's height?
(31 answers)
Closed 9 years ago.
There is the following simple structure:
<div id="container">
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</div>
I need that menu and content have got the same height, but I can't set in as constant. I set "min-height" for the both items as "600px", but now "content" is more than 600px, but "menu" has got 600px. How can I fix it?
If you don't care so much about IE6 and IE7, the simplest answer is setting
display: table-cell;
on each of your columns.
Just check http://ie7nomore.com/css2only/table-layout/ for this pure CSS2.1 solution (both columns are contenteditable so you can easily add lines and lines of text in one and/or another column)
And no it isn't "using tables" as some may argue : the table value of the CSS property display renders the same way as a the HTML element table but it's still the semantic of a div (i.e. none) or whatever element it's applied to ;)
Then for IE6 and IE7, you can use conditional comments for a simple fallback (like applying background to one of the column and if the other is longer in some pages ... nevermind and forget it, it's old IE and your text is still readable)
Another method (a visual trick) is the technique of faux-columns
I used display: inline-block, is this what you are looking for?
http://jsfiddle.net/SMxRs/1/
#header, #menu, #content, #footer {
width: 600px;
height: 500px;
background: #ccc;
padding-left: 10px;
display: inline-block;
}
#container {
width: 2500px;
}