This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
CSS height 100% in IE7
I'd like to have a centered block on a webpage that's filled to 100% by a child div.
Here is my HTML code:
<div id="parent">
<div id="child"></div>
</div>
Here is my CSS:
#parent {
position: absolute;
background-color: blue;
top: 2em;
left: 4em;
bottom: 3em;
right: 2em;
}
#child {
position: relative;
background-color: red;
height: 100%;
}
And here is a JSfiddle:
http://jsfiddle.net/XMS2G/1/
The problem is that in Internet Explorer 7, the browser does not cause the child div to expand to the entire parent div. How would I accomplish this without using Javascript?
Consider using position:absolute for child as well. And then just use top:0px; bottom:0px; right:0px; left:0px;
I think it will work.
You need to give the child position: absolute and set left, right, top, bottom to 0.
See it in action.
You'll likely have to set a hard-coded width for the parent DIV to get IE7 to behave nicely. the centering can be done with the "margin-left: auto;" "margin-right: auto;" css.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
How can I vertically align elements in a div?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
My issue
Usually when using percentages inside a margin property the browser uses the width of the nearest positioned ancestor as reference length. However I'd like to set the margins of my element relative to its parent's height. Is that somehow possible? Or am I stuck with a JavaScript solution?
An example
Specifically I'd like the following:
.child {
height: 1em;
width: 1em;
background: red;
display: inline-block;
margin: calc((100% - 1em) / 2);
/* margin: calc((5em - 1em) / 2); In absolute units */
/* margin-sizing: height; If only there was some magical property like this... */
}
.container {
background: green;
height: 5em;
width: 15em;
position: relative;
}
<div class="container">
<div class="child"></div>
Something
</div>
To look like this:
I know that I could use absolute units in the example above. However I may not always know the exact height of the parent in a more complex or dynamic example. And I'd like to avoid JavaScript for this.
Edit
I should clarify something. My end goal is that the red div in the example above is centered vertically but also has the same distance to the left as it has to the top/bottom. Obviously I'm not bound to specifically use the margin properties. But the outcome of your solution should be the same.
If you can just use margin or padding then you are stuck because the top and bottom of these properties are relative to the parent's width when used as percentages (as you mentioned already).
The only solution I see is keep the parent element in position: relative and use top & bottom to the child element (which is in position: absolute) to use in percentages.
.child {
height: 1em;
width: 1em;
background: red;
display: inline-block;
--calc: calc((100% - 1em) / 2);
top: var(--calc);
left: var(--calc);
right: var(--calc);
bottom: var(--calc);
position: absolute;
/* margin: calc((5em - 1em) / 2); In absolute units */
/* margin-sizing: height; If only there was some magical property like this... */
}
.container {
background: green;
height: 5em;
width: 15em;
position: relative;
}
<div class="container">
<div class="child"></div>
Something
</div>
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 3 years ago.
My CSS code has two squares, green (small, child) and red (big, parent). I want to hide the lower half of small box under big box so that no overlap is visible.
My following code doesn't work but if I remove z-index on the red box, it works.
I can't understand this behaviour. As per my understanding, any -ve z-index on the child will take it below the parent no matter what the z-index on the parent is.
Is it incorrect?
.parent {
background:red;
height: 100px;
width: 100px;
position: absolute;
z-index:1;/*comment this line to make it working*/
}
.child {
height: 10px;
width: 10px;
position:absolute;
background:green;
top: 0%;
left: 50%;
transform: translateY(-50%);
z-index: -1;
}
<div class="parent">
<div class="child"></div>
</div>
Expected result:
By giving the parent element a z-index of its own you establish a new stacking context.
This causes the z-index of the child to be scoped to inside the parent instead of scoped to the html element.
This question already has answers here:
Why position:sticky is not working when the element is wrapped inside another one?
(1 answer)
Why bottom:0 doesn't work with position:sticky?
(2 answers)
Closed 3 years ago.
I have added this code to my website but there is no effect:
.wp-block-column:not(:first-child) {
position: sticky;
top: 0px;
}
Here I share a fiddle to demonstrate: https://jsfiddle.net/9xb0q8fw/1/
Screen must be at least 790px wide.
I would like that the right column stays sticky until the left column has passed while scrolling down.
But position:sticky; is not taking effekt.
Thank you for any help!
The sticky element in your fiddle has no height setting - use a set height to avoid that, then the sticky position works:
https://jsfiddle.net/rocz5nL1/
position: sticky only works when the parent element around it has a larger height, and when it reaches the end of that element it "bottoms out". So if the wrapping parent element is the same height as the sticky element, it never gets a chance to become sticky. See this demo for a working example of what I mean.
.container {
height: 900px;
}
.content-half {
float: left;
width: 50%;
background: #EEE;
}
.i-am-sticky {
position: sticky;
top: 0px;
padding: 10px;
margin: 10px;
border: 1px solid blue;
background-color: #333;
color: #FFF;
}
<div class="container">
<div class="content-half">
<div class="i-am-sticky">Sticky - not working b/c parent is too short</div>
</div>
<div class="content-half" style="height: 500px;">
<div class="i-am-sticky">Sticky - works b/c parent has height!</div>
</div>
</div>
Horizontally aligning a div-element within another div-element can be achived with margin: 0 auto; as long as they both have a width-property other than auto, but this does not apply for vertical alignment.
How can you vertically align a div within another div?
There are a number of different approaches to this, based on various ideas. Given that the element has a fixed height (in px, % or what have you), the best solution I've found so far is based on the following principle:
Give the parent div position: relative; and the child div position: absolute;, to make the child absolutley positioned in relation to the parent.
For the child, set top, bottom, left and right to 0. Given that the child also has a fixed width and height that is less than the size of the parent, this will push the browser into an impossible situation.
In comes margin: auto; on the child, as the browsers savior. The browser can now add enough margin on all sides to let the child-element keep its size, yet still fill out the entire parent as forced by top, bottom, left and right set to 0.
TADAAA! The element gets vertically and horizontally aligned within the parent.
Markup
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 200px;
height: 200px;
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100px;
height: 100px;
}
A working example
http://jsfiddle.net/sg3Gw/
I find it easiest to use display:table-cell; vertical-align:middle; here's a jsfiddle
<style>
.a {
border:1px solid red;
width:400px;
height:300px;
display:table-cell;
vertical-align:middle;
}
</style>
<div class="a">
<div>CENTERED</div>
</div>
Let's say I want to place an element in the center of my viewport for use as a popup message. It should fulfil the following:
Element should remain centered (both horizontally and vertically) within the browser, even if element size changes dynamically
Element should stay centered if browser is resized
No Javascript is allowed
Would still work on IE7
Is there a nicer way of achieving this without resorting to the table-based solution below?
<table style="position:absolute;width:100%;height:100%">
<tr>
<td align="center">
<span id="centeredContent">I always remain centered</span>
</td>
</tr>
</table>
The best solution (in my opinion) is to use absolute positioning to place the top left of the element at 50%/50%, then shoving the element back into the centre using negative margins. The only drawback is that you have to specify a width and height of the element. Here's an example:
HTML:
<div id="centerme">
Hello, world!
</div>
CSS:
#centerme
{
position: absolute;
left: 50%;
top: 50%;
/* You must set a size manually */
width: 100px;
height: 50px;
/* Set negative margins equal to half the size */
margin-left: -50px;
margin-top: -25px;
background-color: cornflowerblue;
}
Here's a demonstration on jsfiddle: http://jsfiddle.net/UGm2V/
If you really require the centred content to have a dynamic height, there's a more advanced solution. Be ware that it won't work in older IE browsers. The HTML goes as follows:
<div id="outter-container">
<div id="inner-container">
<div id="centred">
<p>I have a dynamic height!</p>
<p>Sup!</p>
</div>
</div>
</div>
The outter container is required to cover the width and height of the page. It's a block element with absolute positioning.
The inner container is actually a table! That's decided by the display: table css property. The win here is that you don't actually need any table HTML.
The #centred div is the last required element. It still covers 100% of the page's width and height, but anything placed inside it will be centred both vertically and horizontally. This is the css you need, with explanations:
/*
An outter container is needed because the table
won't cover the page width and height on it's own
*/
#outter-container
{
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
/*
The inner container is a table which is set to
cover the width and height of the page.
*/
#inner-container
{
display: table;
width: 100%;
height: 100%;
}
/*
This table cell will cover 100% of the page width
and height, but everything placed inside it will
be placed in the absolute centre.
*/
#centred
{
display: table-cell;
vertical-align: middle;
text-align: center;
}
And of course, here's a jsfiddle demonstration to go with it: http://jsfiddle.net/N7ZAr/3/
If it is a fixed size element, you can do something like this:
#centered {
position:absolute;
width:200px;
height:400px;
top:50%;
left:50%;
margin-left:-100px; // negative-half of element's width
margin-top:-200px; // negative-half of element's height
}
The trick here is top:50%; left:50%;. Combine it with a margin-left and a margin-top equal to negative-half of your width and height, and your element will be centered in your page.
If you do not use a reset stylesheet such as Eric Meyer's CSS reset or normalize.css, it's important you set your body to margin:0; for this trick to work.
Here is a jsfiddle: http://jsfiddle.net/remibreton/fZywe/1/
Live example of a site I did: http://althotels.ca/
http://milov.nl/code/css/verticalcenter.html
check the source code
If you don't know the size of the centered content, you need a two step centering
Example here: http://jsfiddle.net/G6fUE/
<div class="popup-center">
<div class="content">
sadalshd<br />
sadalshd<br />
<img src="http://www.lorempixel.com/200/200" />
sadalshd<br>
</div>
</div>
.popup-center {
position: absolute;
top: 50%;
left: 50%;
}
.popup-center div {
margin-left: -50%;
margin-top: -50%;
}
for left/right centering, you can specify a width for the element and set the left and right margins to "auto".
For vertical centering, it's a bit trickier. You can use percentage heights, but remember to set the height of the body to be 100% or this won't work.
Don't know if this works in IE7, sorry.