I use the following format:
body: margin x%
.parent: padding y%
.child: some width, exact above padding
Body has a margin of x percent. Inside, there is a parent div that has a y percent padding. And a child div of some width that I am trying to make it have the exact same padding as the parent. Any suggestions without using javascript?
Use padding: inherit; for child elements. A child element will get the padding from a parent div.
You can approximate this relying on vw unit. The padding consider the width of the parent to get computed so the padding of the parent element will be width of viewport - margin of the body = width of the body. We can consider calc() to obtain the padding and use the same for the child.
Here is an example where I consider 10% padding and 5% margin on the parent. The only drawback of this method is the width of scroll bar that is considered in the calculation that's why I call it an approximation
.parent {
padding:calc((100vw - 2*0.05*100vw)*0.1);
border:1px solid;
}
.percentage {
padding:10%;
}
.child {
padding:calc((100vw - 2*0.05*100vw)*0.1);
border:1px solid;
}
body {
margin:5%;
}
<div class="parent percentage">
<div class="child">
some content here
</div>
</div>
<div class="parent">
<div class="child">
some content here
</div>
</div>
Related
I've been doing CSS for a while now but couldn't figure out what's going here. Feeling really dumb :) Could you explain the behaviour?
.parent {
display:inline-block;
}
.child {
border: 2px solid red;
padding: 20px; /* this works as expected */
padding: 20%;
box-sizing: border-box; /* makes no difference */
}
<div class="parent">
<div class="child">CSSisAwesome</div>
</div>
You are facing a cyclic calculation due to the use of percentage value. The parent is an inline-block element so its width is defined by its content and that same content is using a percentage value so the content need a reference for that percentage which is the width of the parent. You have a cycle.
In such case, the browser will first ignore the padding to define the parent width and then calculate the padding BUT we don't get to calculate the parent width again because will have an infinite loop.
Check this:
.parent {
display: inline-block;
}
.child {
border: 2px solid red;
}
<div class="parent">
<div class="child">CSSisAwesome</div>
</div>
<br>
<br>
<div class="parent">
<div class="child" style="padding: 20%;">CSSisAwesome</div>
</div>
Note how in both cases, the width of the parent is the same and that width is defined by the content. The padding is added later and create an overflow.
You can find mode detail in the Specification
Sometimes the size of a percentage-sized box’s containing block depends on the intrinsic size contribution of the box itself, creating a cyclic dependency.
Related questions:
Why does percentage padding break my flex item?
CSS Grid - unnecessary word break
How percentage truly works compared to other units in different situations
As seen in this CSSTricks article, padding using percentage units is in relation to the parent container, not the content within the element. The 20% padding you're setting in your code snippet is in relation to the .parent div's dimensions, not in relation to the content within the .child div.
If you are using % as a unit, Parent should have fixed width and height
This question already has an answer here:
Height Calculation By Browsers : Containing Blocks and Children
(1 answer)
Closed 3 years ago.
When you give min-height to parent and percentage height to the child, the child doesn't get any height.
.p {
min-height: 50vh;
background-color:beige;
}
.c {
height: 50%;
background-color: red;
}
<div class="p">
<div class="c"> hi </div>
</div>
But if you give explicit height to parent, even if it is smaller than min-height, the child gets a height, but it is relative to min-height and not height provided( when height < min-height)
.p {
min-height: 50vh;
height: 1px;
background-color:beige;
}
.c {
height: 50%;
background-color: red;
}
<div class="p">
<div class="c"> hi </div>
</div>
First, I want to understand this behaviour
How can I give the height in percentage to the child with min-height only on the parent
Here is how percentage height works https://developer.mozilla.org/en-US/docs/Web/CSS/height I am using this link because it was much easier to find, as mentioned in the other answer, spec link https://www.w3.org/TR/CSS22/syndata.html#value-def-percentage
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
You will have to scroll down to find this (Specifications section)
In your case, since you did not specify the height of the parent, your child percentage height computes to auto which is what you saw in your example
here is how you can get percentage height to work without specifying a height of the parent, with position absolute
.p {
min-height: 50vh;
background-color:beige;
position: relative;
}
.c {
height: 50%;
background-color: red;
position: absolute;
}
<div class="p">
<div class="c"> hi </div>
</div>
Note - the height of your parents = the greater value between min-height and height, which is why your second case works
Honestly, adding a height of 1px as a work around to get the percentage to work for a child without defining a fixed height (since min-height overrides) is a pretty good work around.
In the first case, you do not specify a height for the parent so according to the specs height doc the height of the child will be set to auto instead of the percentage.
If the height of the containing block is not specified explicitly , and this element is not absolutely positioned, the value computes to auto.
In the second case you set a specific height and a min-height. According to another spec regarding min-height
The element's height is set to the value of min-height whenever min-height is larger than max-height or height.
So just by setting height:1px on the parent ( so setting a specific height ) the value of height:50% of the child will compute to 50% of the parent's height. Now, the parents height is not computed to 1px but to the value of min-height . So the child 50% height will be 1/2 of min-height of parent.
Let's say we have the following HTML:
<div id='parent'>
<div id='child'>
</div>
</div>
If we set this CSS :
#parent {
width:1000px;
height:1000px
}
#child {
width:20%;
height:40%;
margin-top:10%;
}
The child element will have a margin-top that will be a % of the parent height or the child height? Also there is a different way that browsers render the % sizeing when it comes to margins ? If there is a padding applied to child/parent , it will influence the margin?
The best way to check is it test it out yourself ;)
All percentages with regards to width, height are calculated based on the parent container's width - in this case, the #child element will have a width of 200px and height of 400px.
Meanwhile, paddings and margins, when percentage-based, are calculated from the containing parent's width: therefore #child will have a top margin of 100px.
Do take note that vertical margins (i.e. the top and the bottom margins) may collapse under some circumstances. In the fiddle that I have posted, this is exactly the case.
I have this div on the CSS:
#bodycontent {
max-width:980px;
margin:auto;
}
#navleft {
width:18%;
border:0px;
float:left;
}
#rightcontent {
max-width:80%;
border:0px;
float:right;
}
and on the HTML:
<div id="bodycontent">
<div id="navleft">
some stuff
</div>
<div id="rightcontent">
some stuff
</div>
</div>
Now I have 2 problems:
If I set the divs 20% and 80% I'll have the divs displayed not side by side but one above and one below
I'd like to have 25px of padding-left on the rightcontent div but, again if I set the padding, the div goes below the other.
Why? The padding is not inside?
The width property is defined (in CSS 2) as the width of the content, not the space between the borders. Padding goes inside the borders, not inside the width.
In CSS 3, you can change this with the box-sizing property but this has limited support.
The problem you are facing is because of the box model. The width you declare is the width of the content and not the true width of the element.
To learn more about the box model
To change this so that the border and padding are all part of the elements width you can use border-box
#your-element {
-moz-box-sizing: border-box;
-webkit-box-sizing:
border-box; box-sizing: border-box;
}
Read about the css box model.
Your content is the inner-most box, and it will have the width you specify. Padding, border, and margin are all added to this width. Padding will be inside the border, but not inside the content width.
I have a div with position:absolute, left:0, right:0; widht:100%. This is fine with my code.
But when i have added another div, which it has width:2000px; my first div width is not expanding. Can you please suggest me.
This is my example. http://jsfiddle.net/vYhv4/
Thanks
The position:absolute property positions the element relative to its ancestor element, in your case that is the body of the document, which is not the width of your .displayElement class. One thing you can do to fix this is to contain both your .displayElement class and your absolutely positioned div, .box, inside of a container that is clearfixed that acts as the ancestor of your .box div, positioned relative.
Like so:
HTML
<div class="element-container">
<div class="box">test</div>
<div class="displayElement">
flash slider comes here
</div>
</div>
CSS
.element-container:before, .element-container:after {
content:"";
display:table;
}
.element-container:after {
clear:both;
}
.element-container {
zoom:1; /* ie hasLayout fix */
position:relative;
display:inline-block;
}
Demo
The first div will only expand to the width of the viewable area, it will not expand past that until you specify a width that is greater.
I assume this is because .box is aligning itself to the body. However, the body is 100% wide and isn't growing when .displayElement becomes wider than the viewport.
Is there any reason why you can't set the .box width to 2000px as well?
It is possible your parent container has a width set that is smaller than your 2000px element. I think as you have your div absolutely positioned with left and right being 0 your width will be the width of your parent container. width:100% wont expand your container to the width of child containers but to the parent.