I understand the principle of left: and right: positioning if you want to position an element inside it's parent and then add the appropriate values to position the element where necessary. I saw a site today where a lot of the elements had the left and right properties both set to 0.
Example:
div {
width: 200px;
height: 200px;
position: fixed;
top: 0;
left: 0;
right: 0;
}
This was the case on a number of fixed and relative positioned <div>s. Surely you can't fix a <div> so it's positioned both left and right to zero? Could someone explain if this is valid CSS, and if so, please explain what it achieves.
Many thanks,
Emily
Yes, this is valid CSS. Basically, code like this will center absolute divs. Just remember to also add this code: margin: auto;. Here's a working example:
div {
position: absolute;
margin: auto;
right: 0;
left: 0;
height: 100px;
width: 100px;
background: red;
}
<div></div>
Related
I have a position: fixed element. It has some top and left properties but it was not visible in the screen. After some debugging I found that it was positioned way off than it should be. So I set top: 0 and left: 0 and now that element was where I wanted it to be (near middle bottom) instead of being in the top-left of the screen as it should be.
Why is this happening? One thing is that it's parent container also has position fixed. I'll have a snippet below
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
<div class="container">
<div class="child">Test</div>
</div>
The reason there is a fixed component inside another fixed is that one is container and the other is kind of a tooltip so it has to be that way.
left and top properties should have some units associated with it, e.g. pixels. Try the following:
.container {
position: fixed;
// position in the center of screen
left: 0;
right: 0;
top: 400px;
margin-left: auto;
margin-right: auto;
}
.child {
position: fixed;
left: 200px;
top: 400px;
}
Got the answer. It's a bug in chrome where a child with fixed position doesn't work if any parent has transform: translate css.
Duplicate of this question
Given an absolutely positioned element with a certain size and overflow:auto and a child element that is also absolutely positioned, anchored to the bottom left corner of the parent element and exceeding it in size, like this:
#container {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
overflow: auto;
}
#content {
position: absolute;
bottom: 0;
left: 0;
width: 50%;
height: 200%;
}
Why does no vertical scrollbar appear on the parent element?
When I change the positioning of the child element to top instead of bottom, the scrollbar appears. It seems like the scrollbar is only visible if the content overflows on the bottom edge of the parent element. Why is this the case?
Here is the link to a JSFiddle that demonstrates the issue: http://jsfiddle.net/qGsd3/14/
I was hoping for a more interesting answer, but it seems to be: "Because the spec says so."
EDIT: I just realized that isn't the right section... But luckily I found the correct one so the answer stands.
http://www.w3.org/TR/2007/WD-css3-box-20070809/#abs-non-replaced-width
At the bottom there are the rules that dictate when height is calculated and how and it states only when there is overflow on the bottom does it extend the height. There is more reading there about how this affects overflow, so just poke around.
Absolute elements don't take up any space, that's why. Absolute positioning isn't needed for your content, change it to static, I can't understand what you are trying to accomplish there...
In my experience, nesting an absolute position inside another absolute position has given me nothing but headaches. Also, for heights, percentages can be hit or miss depending on the browser. Take a look here to see what I did on the 'bad' class to display the overflow.
#container {
position: relative;
width: 100px;
height: 100px;
overflow: auto;
background: green;
text-align: right;
top: 100px;
}
.left {
left: 100px;
}
.right {
left: 300px;
}
#content {
position: absolute;
width: 50%;
height: 100px;
background: red;
}
.good {
top: 0;
left: 0;
}
.bad {
bottom: -20px;
left: 0;
}
http://jsfiddle.net/qGsd3/39/
I'm working on a lightbox. I need it to be dynamically sized based on its content. But I also need it to be centered in the screen. I'm trying something like this:
HTML:
<div class="lightbox-background">
<div class="lightbox">
LIGHTBOX CONTENT
</div>
</div>
CSS:
.lightbox-background {
background-color: rgba(0,0,0,0.9);
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 50;
}
.lightbox {
background-color: white;
width: 780px;
z-index: 100;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: auto !important;
max-height: 90%;
}
I couldn't make it work. I'd like to avoid using JS, if possible. How can I do it?
You could work with vertical-align: middle as well as the :before selector on the parent container. Check out my fiddle:
http://jsfiddle.net/GA5K3/2/
The best way that I know to center vertically with CSS is to absolute position top 50% then set a top margin negitave half height of element.
Since you don't know the height you'll have to use JS.
Maybe someone has a better technique.
I'm just getting into HTML and CSS and I have a quick question. Is there any way to make a parent element grow in size to accommodate one of its children? I have the background set on <html>. Then inside the body I have a div which sets a different background color and isn't as wide/tall as the whole page. This leaves a two toned design. Then, I have a nested div containing all the content to be displayed. This all works fine, unless the page content is enough that a scroll bar is necessary. If that happens, both background colors are lost past the original bottom of the screen. This problem is extremely annoying and from what I've read there is no great way to handle it, but I wanted to see if anyone knew. I have the following properties set:
html {
background: [gradient code...]
height: auto;
min-height: 100%;
background-repeat: no-repeat;
background-size: 100%;
}
body {
height: auto;
width: 100%;
position: absolute;
bottom: 0;
top: 0;
margin: 0;
padding: 0;
border: 0;
}
div.background {
background-color: #D0D0D0;
text-align: center;
height: auto;
width: 70%;
position: absolute;
top: 150px;
bottom: 30px;
left: 15%;
margin: 0;
padding: 0;
border-radius: 7px;
}
div.container {
height: auto;
width: 70%;
position: absolute;
left: 15%;
bottom: 0;
top: 0;
}
Where div.background has the second background color and div.container has the content displayed on the page.
Thanks for your help.
How about not using position: absolute? Remove that (and the associated top, left, bottom...) and replace them with correct margins instead.
I believe if you specify size (width, height) auto on the parent (or just leave it without specifying size) it grows/shrinks to fit the children's size (it doesn't work recursively, so you may want to go up to the last parent in the tree). Avoiding absolute positioning (http://www.w3schools.com/Css/css_positioning.asp) could also do the trick, and float element or a different z-index could probably do the workaround too, but overgrowing the parent, I think...
If you get rid of the width and position absolute div.background and change position absolute to relative for div.container you should be good
I have a relatively simple layout as seen in the simplified version of the code below:
<div id="protocol_index_body_wrapper">
<div id="protocol_index_body">
</div>
</div>
The CSS
#protocol_index_body_wrapper {
background: url("/images/stripe.png") repeat scroll 0 0 transparent;
position: absolute;
top: 120px;
left: 0px;
right: 0px;
bottom: 10px;
}
#protocol_index_body {
width: 960px;
margin: 0 auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
The absolute positioning is needed to make sure that both div's expand to the full height of the window. The expected behavior is seen in the image above and is present in IE8, Firefox, and Chrome. However, in IE7 the div which should be centered is flush against the left side. Any ideas how to fix this?
Have you tried specifically assigning an auto value to the margin-left and margin-right? This will force both margins to be equal and center the div provided your div is not at 100% width of the page.
{
margin-left: auto;
margin-right: auto;
}