Take a look at my snippet.
The parent div has a scrollbar and a child div.
Why is the padding (5px) missing on the right side?
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
<div id="moh">
<div></div>
</div>
To get the bounty I want to know the reason for the missing padding. Maybe there is a name for this phenomenon. Or may it be a browser bug?
It would be excellent to know the part in the CSS or HTML specification which is responsible for the missing padding. But this is not required to get the bounty (Because I know it's hard to find).
#moh
{
background:red;
overflow-x:auto;
width:100px;
padding:5px;
}
#moh div
{
/* width:500px; */
height:50px;
background:green;
}
<html>
<head>
</head>
<body>
<div id="moh">
<div></div>
</div>
</html>
The padding on the right hand side doesn't appear because, the total width of the parent div is 100px(width) + 10px(padding) while the width for the chid div is explicitly set to 500px.
Since the chid div is a block level element and width property greater than that of the parent, it will move past the parent element and hide the right border from the parent div.
Solutions
either remove the width attribute in the child div (so it will take full width of the parent)
or set the width of the parent to at least 500px which is the width of the child element
The reason for this can tell. It's hard to explain, but I'll try. Your" moh " div width value is 100px," moh " in the div width value is 500px. The order of items on Pages is normally left to right. If you do not apply overflow, you see the overflowing sections :
#moh {
background: red;
width: 100px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="moh">
<div></div>
</div>
As you can see, there's an overflow from left to right. when you give overflow, The Overflow will be hidden automatically. So where's the overflow ? (left ? right ? ) That's why it will try to hide everything from the overflow, that is, the part that goes out when it doesn't fit. The part he's trying to hide is in the padding, so that part doesn't show up.
I'm sorry if I said anything that would be misunderstood. Maybe I helped you understand a little bit.
It happens because #moh is 100px and the inner div is 500px. The solution is to set them both to 500px and wrap them with a 3rd div that is limited to 100px with overflow-x.
#wrapper {
overflow-x: auto;
width: 100px;
}
#moh {
background: red;
width: 500px;
padding: 5px; // this padding should be on all 4 sides
}
#moh div {
width: 500px;
height: 50px;
background: green;
}
<div id="wrapper">
<div id="moh">
<div></div>
</div>
</div>
#wrap
{
overflow-x:auto;
width:100px;
}
#inner
{
background:red;
padding: 15px;
width: 500px;
}
#inner div
{
width:500px;
height:100px;
background:green;
}
<div id="wrap">
<div id="inner">
<div></div>
</div>
</div>
one solution would be this:
I had to add some more HTML but hope it solves your problem
It's because of the html behavior of block element like DIV and css overflow property.
By default html elements flow from left to right.
Browsers by Default behavior is -
If parent DIV have any width property (or specific width
inherited) and no css overflow rule is defined, and if child DIV
have defined width which is more than the parent can accommodate,
then it will overflow and will grow beyond the right edge of parent.
To control how Parent Div will deal with overflowing, css overflow
property can be used. overflow:hidden will instruct browser to crop
the exceeding width div at the edge.
overflow-x:auto will instruct browser that, when child element
exceeded width beyond the edge then add scrollbar at x-axis.
So, in the example case above, the child div is having greater width than parent and it is exceeding of the parent. And parent div is having 'overflow-x:auto' rule defined, the scrollbar is appearing upto the edge of parent.
Since padding is inside the edge of the div, it does not considered.
If you want to have padding on all side of the parent div.
Treat the parent div as a grandparent by adding one more div inside a parent and moving child div in it.
On grandparent div you can add required padding and width.
3 On new parent set width:100% which will expand to fit in a grandparent and setting overflow-x:autorule will add scrollbar when the child div expand beyond the parent width.
So, the code will be something like -
#moh
{
background:red;
width:100px;
padding:5px; // this padding should be on all 4 sides
}
#moh div
{
width:500px;
height:50px;
background:green;
}
div{
box-sizing:border-box;
}
#moh div.moh-container{
width:100%;
overflow-x:auto;
}
<!-- Grand parent Div for padding and width -->
<div id="moh">
<!-- Parent Div width 100% to fit in grandparent and overflow rule -->
<div class='moh-container'>
<!-- child element with exceeding width -->
<div></div>
</div>
</div>
Fiddle -
https://jsfiddle.net/guruling/471ka569/13/
Related
I wonder why the phenomenon will happen?
the inner div set margin-bottom 16px
As far as I know,the outer div contact with the inner div,no padding or border,if the outer div isn't set height css style,the under div will 16px away from the outer div, because the margin is overlap.However,if height css style is set on the outer div,the under div is close to the outer div.
so,can you explain how this phenomenon is caused?
.outer {
background: yellow;
height: 100px;
}
.inner {
height: 100px;
background: green;
margin-bottom: 16px;
}
.under {
background: red;
height: 10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
So first things first, let's address this:
if you remove height css style on the outer div,you will find the under div is move down
This is due to Margin Collapsing:
If there is no border, padding, inline part, block formatting context created, or clearance to separate the margin-bottom of a block from the margin-bottom of its last child, then those margins collapse. The collapsed margin ends up outside the parent.
These rules apply even to margins that are zero, so the margin of a first/last child ends up outside its parent (according to the rules above) whether or not the parent's margin is zero.
Your child margin is collapsing with the parent margin, thus the 16px margin acts as part of the parent.
However by specifying a height, you negate margin collapsing.
From the W3 Box Model spec*:
Two margins are adjoining if and only if:
Both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
The bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
Because the margins do not collapse, the child's margin will simply attempt to expand the height of the outer div (which won't be reflected, because the parent has a strictly set height of 100px).
But wait... what if we broke the collapse some other way? Would we see the height increase by 16px?
Two margins are adjoining if and only if:
no line boxes, no clearance, no padding and no border separate them
Seems easy enough. Let's add a border to break this rule.
.outer {
background: yellow;
border-bottom: 1px solid black;
}
.inner {
height: 100px;
background: green;
margin-bottom: 16px;
}
.under {
background: red;
height: 10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
Voila! As expected, the margins do not collapse, therefore the child's margin attempts to expand the height of the parent. With no height property on the parent to counter this, the height of the parent grows to 116px.
* This is pointing at an older spec, however this behavior has not changed. In fact, some of the newer spec documents I've found reference/link to this one.
You cannot add a margin to child element to affect on a parent element. You may add margin-bottom:16px; to Outer class as below
.outer{
background:yellow;
height:100px;
margin-bottom:16px;
}
inner is nested inside outer, and under is directly underneath outer with no space or padding. So regardless of the margin given to inner, there'll be no space between outer and under.
You can do this by simply adding a margin-top to under.
.outer{
background:yellow;
height:100px;
}
.inner{
height:100px;
background:green;
}
.under{
background:red;
height:10px;
margin-top:16px;
}
set .outer height:auto;
.outer{
background:yellow;
height:auto;
}
.inner{
height:100px;
background:green;
margin-bottom:16px;
}
.under{
background:red;
height:10px;
}
<div class="outer">
<div class="inner"></div>
</div>
<div class="under"></div>
When I use float, childs pop out of parents.
I just put overflow:hidden on the parent and the child pops back into its parent.
However, I can't do the same with an absolute div and a relative div.
.parent {
position: relative;
overflow: hidden;
}
.child {
position: absolute;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
The goal is to float 2 images one over another to create a slideshow, but still make the page respect the slideshow as an item.
Expected: "First" hovers above "Second" inside parent
Behavior: "First" and "second" are hidden, parent is 0px in height.
Upon removing overflow:hidden;, they appear outside the parent.
Since you have only absolute div inside a relevant parent div there is effectively no content in the parent div. You can set a preferred height to the parent div but also need to set html and body height to 100%.
Note: You would likely set your parent div to the size of your images to be displayed
I have colored the parent black and the children red for visual point of view.
Is this what you are trying to achieve? Sorry if I have miss understood your question.
html, body {
height:100%;
width:100%;
}
.parent {
position: relative;
height:50%;
width:50%;
background-color:Black;
}
.child {
position: absolute;
background-color:red;
width:20%;
height:20%;
}
<div class="parent">
<div class="child">First</div>
<div class="child">Second</div>
</div>
I have a parent which has the CSS property of table-cell, with a child element that need to be 100% the height of the parent. I cannot get this to work in IE Edge - any ideas?
<div class="table">
<div class="table-row">
<div class="table-cell-1">
<a>need 100%!</a>
</div>
<div class="table-cell-2">
some content<br>
that is <br>
quite high
</div>
</div>
</div>
.table {
display:table;
}
.table-row {
display:table-row;
}
.table-cell-1, .table-cell-2 {
display:table-cell;
width:100px;
}
.table-cell-1 {
background-color:red;
}
.table-cell-2 {
background-color:green;
}
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
See JS Fiddle: http://jsfiddle.net/82no4o0x/10/
You have this code:
.table-cell-1 a {
display: inline-table;
background-color:#ccc;
height:100%;
min-height:100%;
}
You're asking the a to be height: 100%. But 100% of what? There is no frame of reference. None of the parents have any height specified.
To see what I mean, make this adjustment to the parent:
.table-cell-1 {
background-color:red;
height: 100px; /* new */
}
Now it should work. See demo: http://jsfiddle.net/82no4o0x/23/
When using percentage heights in CSS you need to specify the height for all parent elements, up to and including body and the root element (html).
Read more here: Working with the CSS height property and percentage values
Because you haven't defined the table or the table row with a height, when you give the link a height of 100%, the link doesn't know what you want it to be 100% of. Although it looks pretty straight forward to you and me. So first of, try giving your table a fixed height and then making your cells height 100%... But I'm guessing you don't want to do that because you want it to grow or shrink depending on the content within it. I tried a few techniques using position absolute on the cell and positioning it relative to the row, but that didn't work in IE for some reason. So I came up with a bit of a trick/hack using a large top and bottom padding and a negative top and bottom margin.
.table-cell-1 { overflow:hidden }
.table-cell-1 a {
padding:2000px 0;
margin:-2000px 0;
}
https://jsfiddle.net/82no4o0x/24/embedded/result/
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
I'd like a table created with DIV, this table has 2 fixed columns (that it's ok) but the both columns must have all the time the same height.
The code can be find here : Code on Fiddle
The code :
<style type="text/css">
#container
{
position:relative;
width:100%;
margin:0 auto;
}
#header {
background-color:#5a7fa9;
}
#center {
overflow:hidden;
width:100%;
}
#left {
float:left;
width:200px;
background-color:Gray;
}
#content {
margin-left:200px;
background-color:#a9bbd1;
}
#footer {
background-color:#95adc9;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="center">
<div id="left">left</div>
<div id="content">content<br/><br/></div>
</div>
<div id="footer">footer</div>
</div>
ther is an example
http://jsfiddle.net/amkrtchyan/dLeWA/9/
Hi i would like to explain the answer given by Howdy_McGee ..
Add min-height: 100px to #center
Add height: 100% to #left
Add height: 100% to content
he explained the above change which is completely correct.
Seeing your code in jiddle you havent wrote height anywhere in your css style. Therefore all your containers will take height:auto as per the content into it.
you have a div with id='center' this div should have some min-height:100px; and both the inner container should have height:100% by this your elements inside the center div will take height of their parent.
I had preferred you to give the min-height:100px because incase you are putting in dynamic content inside your inner boxes height should increase automatically, therefore if you do not have any content into your div height will stick to 100px.
Hope my explanation makes sense because i am in a bit hurry to type.
You can use this dirty hack (only adding this css):
#center > div {
margin-bottom: -2000px;
padding-bottom: 2000px;
}
Also see your updated example.
=== UPDATE ===
I'll try to explain it:
The padding-bottom uses the background-color. It has to be a heigh value (the minimum different height between the lowest and heighest column). So each column in the center-div add the background-color at the bottom. The negative margin-bottom sets the height back to it's real height. (The entire content is also be visible, even if the minimum height isn't large enough.)