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.
Related
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>
I'd like a fixed element's width to match that of the div placed immediately below it. Imagine a header and a main content div. A problem in matching their widths occurs when the header and content divs are nested inside an outer div. In this scenario the % widths of each no longer match their parents width (e.g.,<body> tag) and the fixed element's width is based on something which is confusing me.
To better explain what I mean, contrast these two js fiddles:
http://jsfiddle.net/2dudX/4/
vs.
http://jsfiddle.net/2dudX/10/
here's the code for each:
<div id="fixed"></div>
<div id="content"></div>
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
vs.
<div id="main">
<div id="fixed"></div>
<div id="content"></div>
</div >
#main{ width:95%}
#fixed{ position:fixed; z-index:2; width:90%;
height:25px; background:yellow;}
#content{ width:90%; height:300px; background:red}
Note only in jsfiddle #1 do the yellow and red divs widths match up regardless of how you resize the browser. Unfortunately, jsfiddle#2 is more of a real world scenario and I'm wondering how to correct the id="fixed" div such that its width also matches up with id="content" div.
Thoughts?
You can to it this way FIDDLE (to set % relative to the #main)
fixed element's dimensions always is calculated relative to the root element, so you need to reset %-unit accordingly
in this particular case you need to set:
#fixed {
width: 85.5%;
}
It is case #main is 95%, your static element is 90% relative to the main. So you need to calculate its width towards the root element (1 * .95 * .9 = .855)
Easy one my friend. Fixed width elements are yanked from their parents and are now relative in width to the window, so in both situations the fixed div is always relative to the size of the window, but when in a parent container with a width other than 100% the fixed element will remain relative to the window width but the non-fixed position element is now relative to the parent width. So the non-fixed element became 90% of the 95% of the window while the fixed element remained a constant 90% of the window only.
Edit:
If you wish to match the widths you can use jquery like this:
$(function(){
$('#fixed').width($('#content').outerWidth());
});
I have a <div> that I want to center (margin auto) and grow as content fills it, so I'm using min-width and min-height to accomplish this, but what's happening is the child <div> is taking on the parent's(<body>) width instead.
How can I prevent this from happening?
example: http://jsfiddle.net/kRF5d/1/
Since div is a block-level element, it's going to fill the entire width of the parent unless a proper width is set. I recommend applying display: inline-block; to the child div.
Just change position to absolute from relative.
#top {
min-width:10%;
min-height:50px;
background-color:blue;
position:absolute;
margin:auto;
margin-top:10px;
top:0px;
z-index:10;
}
If you don't want your #top div to be %100 width then give it a width.
http://jsfiddle.net/kRF5d/3/
The problem you're seeing is because min-width sets the minimum width, it doesn't limit the maximum width. So because divs display as block-level elements, it automatically grows to the same width as the parent element.
So while I don't know specifically what you're trying to accomplish with this, that's the reason it's not working as expected.
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.
I have html like this:
<div id='content'>
<div id='first'>...</div>
<div id='second'>...</div>
</div>
#content
{
width:100%;
position:relative;
padding:20px;
}
#first
{
width:70%;
position:relative;
}
#second
{
width:70%;
position:fixed;
}
this causes the second div to be a bit wider (40px to be exact) than the first div, because the first div's 70% is with respect to the content's width (which is 100% minus the padding of 20px on each side).
What does the second div's 70% refer to? How could I make it so that the two divs are the same width?
The first div's 70% refers to 70% of the width of #content.
The second div's 70% refers to 70% of the width of the viewport.
If you add this CSS, the two div's are the same width:
html, body {
margin:0; padding:0
}
Live Demo
According to the CSS 2.1 Positioning Scheme spec:
In the case of handheld, projection,
screen, tty, and tv media types, the
box is fixed with respect to the
viewport...
This leads me to believe that the 70% you're setting is actually 70% of the viewport.
As far as making it the same width as the other div, perhaps you could use JavaScript (or specify widths explicitly).
This weird behavior (great question!!) can be referred about the fact that the relative div (first) take the width looking at his father. The second one just look at the viewport, no matter who is its father (and what width is set to its father)!
This can fix your problem:
body,html{
padding:0;
}
Edit -> Fiddle
I set an absolute width using javascript to detect the computed width of #first.