I'm working to center #child within #parent at 100% height and width. Why does setting the #child top position to 10% work, but using 10% as a margin-top does not?
http://jsfiddle.net/rbtstudio/SCmfG/
<style>
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
}
#parent {
width: 100%;
height: 100%;
background-color: #323232;
}
#child {
width: 80%;
height: 80%;
background-color: #eaeaea;
margin: 0 auto;
position: relative;
top: 10%;
}
/*
#child {
width: 80%;
height: 80%;
margin-top: 10%;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
*/
</style>
<div id="parent">
<div id="child"></div>
</div>
The issue here is called "collapsing margins". You can read more about them in the css spec.
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
It's not that the margin isn't working, it's that the margin is collapsing, causing the margin to apply to the top of the parent box.
You'll notice that when the margin is applied to the child, the parent is moved down.
http://jsfiddle.net/SCmfG/4
One workaround (of many) to avoid the collapsing of margins is to add overflow: hidden to the parent element:
http://jsfiddle.net/SCmfG/5/
EDIT: Another important point to keep in mind (which was in another answer which has since been deleted) is that all percentage margins are based on a percentage of the width of the element, even top and bottom.
Related
I have a div with unknown width and height, this div is one of the children of a bigger div.
#myDiv {
/* Blah blah blah */
}
#inner {
position: absolute;
width: 100%;
height: 100%;
}
<div id="myDiv">
<div id="inner"></div>
</div>
But the problem is that the #inner div doesn't fit properly, it's way bigger than its parent #myDiv while its width and height are set to 100%.
What am I doing wrong?
By making any element position: absolute; means: place me to the first parent that is position: relative; which is not always equal to its parent element.
And if there are other children you need to remember that one of them will be places "under" the element posiotionated absolutely.
Accepted answer didn't solve it for me. Parent element was already position: relative;.
This is what worked for me:
In the child element, instead of using height:100% use top:0; bottom:0; to fill up height, and left:0; right:0; to fill width up.
.child {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
One reason an absolutely-positioned child element can stick out from its relatively-positioned parent is if the parent has padding.
Take the following example:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: 100%;
height: 100%;
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
As you can see, the actual width and height of the child is the same as the parent, however since the parent has padding-top and padding-left, the child's content is placed after the parent's padding. This makes the child stick out at the bottom and the right.
There are different ways to handle this, depending on the desired outcome.
If you want the child to perfectly cover the parent, either use bets's solution and set the top, right, bottom and left attributes on the child instead of the width and height, or just keep the width and height at 100% and set top and left to 0, like this:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #ff000044;
}
<div class="parent">
I am parent content
<div class="child">I am child content</div>
</div>
If you want the child to occupy all the space within the padding on the parent, you can use calc() to remove the parent's padding from the child div:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: calc(100% - 100px);
height: calc(100% - 100px);
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
(Just remember to remove both the left and right padding from the child's width and the top and bottom from its height. That's why I am multiplying the padding by 2.)
Combining these, if you want the child to start after the top and left padding, but not stick out the right or bottom, only subtract the top and left paddings from the height and width of the child:
.parent {
position: relative;
padding: 50px;
width: 250px;
height: 50px;
margin: auto;
background-color: blue;
}
.child {
position: absolute;
width: calc(100% - 50px);
height: calc(100% - 50px);
background-color: #ff000099;
}
<div class="parent">
<div class="child"></div>
</div>
My container is not touching my footer for the majority of cases and I'm not sure what's going on.
So here is my CSS code:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0;
width: 100%;
height: 100%;
}
section {
height: 100%;
}
#container {
overflow: auto;
width: 80%;
margin: 0 auto;
background: red;
height: 100%;
}
.footer {
width: 100%;
position: absolute;
left: 0;
bottom: 0;
}
Here's my HTML:
<body>
<div id="container">
<section>
<p>Content goes here</p>
</section>
</div>
<div class="footer">Content</div>
</body>
So I have all of the heights set for parent elements,but there's still a big gap between the container and the footer. In cases where the content takes up the whole page, the footer and container ends up touching, but the content for some reason gets lost in the footer. How can I solve this issue?
Height based on percentage are tricky. vh is much better for such purposes.
Here is the solution: JSfiddle
#container {
overflow: hidden;
width: 80%;
margin: 0 auto;
background: red;
height: 100vh;
}
Make one adjustment to your CSS:
Add height: 100% to the html element.
html {
height: 100%; /* NEW */
min-height: 100%;
position: relative;
}
This will clear the way for all child elements to recognize their percentage heights, and the container will expand. Your min-height: 100% will still work because min-height overrides height.
DEMO: http://jsfiddle.net/au6tcodc/
(You'll notice a vertical scrollbar on the container in the demo. This is caused by the overflow: auto declaration in #container. If you want to remove the scrollbar switch to overflow: hidden (see all overflow values).
My google map canvas, is set to width 80%. The map itself fills 80%, but there's a wide space to the right of the canvas that fills the 20% left of the screen.
Which makes my div unable to be placed there.
html:
<div id="map-canvas" ></div>
<div id="search">Test</div>
css:
#map-canvas {
width: 80%;
height: 100%;
margin-left: 50px;
margin-right: 50px;
min-height: 80px;
min-width: 200px;
margin: 0;
padding: 0;
z-index: 0;
position: relative;
}
#search {
background: #2E2E2E;
float: right;
width: 20%;
height: 800px;
z-index: 1;
}
That's because a div is by default a block element, which means it fills all the width available for it, unless you tell otherwise.
One way is to use float, that "disables" the block property. You tried using it on the search div, but the map div is your problem.
Add a float:left property to the map div and it will do. See here: http://jsfiddle.net/L222L/1/
Just a tip:
What's the point of setting a margin property, if you are then removing it?
margin-left: 50px; <---
margin-right: 50px; <---
/* ... */
margin: 0; <---
I am trying to understand a problem I am facing when moving my application from one area to another. I was previously testing my HTML in an isolated test application and have got it to a stage where I am happy with it. So I began integrating it into the correct place. When doing this I found I am having a curious CSS problem as the div elements no longer appear to be inheriting the dimensions of the child divide.
I created a JSFiddle in order to demonstrate the problem, code also provided below.
Working backwards, the outermost div with the style attributes hard-coded for height and width (100px) appears to have a computed style that I would expect.
Happy so far. We can see 100px for height and width.
The div with the class child also appears to inherit the dimensions from the child content, as I would expect. We see 100px for height and width.
So far, correct behaviour.
However, this is where my knowledge of CSS falls down. The div with class parent appears to lose all width and height information from it's content and so the user sees nothing in the browser as the size for these div's essentially becomes 0px and the content is hidden.
The question I have, is why does the width and height not get inherited from the children of the div element with the parent style class.
HTML
<div class="grandparent">
<div class="parent">
<div class="child">
<div style="height: 100px; width: 100px; background-color: black;">hello</div>
</div>
</div>
</div>
CSS
.grandparent {
height: auto;
position: absolute;
margin: 0;
overflow: auto;
display: block;
background-color: red;
}
.parent {
position: relative;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
overflow: hidden;
display: block;
background-color: green;
}
.child {
height: auto;
position: absolute;
margin: 0;
overflow: auto;
display: block;
background-color: blue;
}
pros and cons for it but position:absolute; in this case is the problem:
http://jsfiddle.net/CyubA/1/
.child {
height: auto;
position: relative;
margin: 0;
overflow: auto;
display: block;
background-color: blue;
}
I am trying to put simple divs and arrange them, but my child div disappearing from parent div even though I am using parent div with relative and child div with absolute positioning. I want connect_us_01 and registeration divs insideheader_block1. I am working towards responsive webdesign. Many thanks.
JSFiddle
<div id="header">
<div id="header_block1">
<div id ="registeration">reg</div>
<div id ="connect_us_01">social media</div>
</div>
<div id="header_block2">
<div id="crown_logo">logo</div>
<div id="nav">navigation</div>
<div class="contact_No_01">020324234233</div>
</div>
</div>
css
#header {
position: relative;
width: 100%;
background-color: #ff6a00;
}
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
background-color: pink;
}
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
background-color: aqua;
}
/*----social media & connect us block*/
#connect_us_01 {
position: absolute;
width: 300px;
height: 50px;
right: 0;
background-color: blue;
}
#registeration {
position: absolute;
left: 1px;
width: 200px;
height: 50px;
background-color: brown;
}
Elements with position: absolute are taken out of the content flow, meaning they have no inherent height. Since the children have no height, the parent gets no height either, rendering the children invisible. You could resolve it by giving the parent a static height (as in, for instance, height: 100px), but that's not very practical and not responsive at all.
What you're looking for isn't position: absolute; it's float: left and float: right. Apply those properties to the children and give the parent overflow: hidden (or whatever method of clearing floats works best with your layout) and it'll work just fine.
To show block you refering to just add to #header_block1 a height parameter also.
#header_block1 {
position: relative;
margin: 0 auto;
width: 90%;
height: 50px;
background-color: pink;
}