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;
}
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
I have a div with some text on my page, and I want it to be at the bottom. I did this using fixed positioning:
div#popup{
position: fixed;
bottom: 0;
But I also want it to be centered. I tried giving it a width of 40% and auto margins, but that doesn't work (it doesn't work with the combination of the above code) :
div#popup{
position: fixed;
bottom: 0;
width: 40%;
margin-left: auto;
margin- right: auto;
How can I achieve this?
Thanks.
If you know width of div you can use negative margin-left for horizontal position (which equals half of width).
div {
position: fixed;
bottom: 0;
left: 50%;
width: 40%;
height: 30px;
margin-left: -20%;
background: blue;
}
JSFiddle
If you don't know width, just use wrapper and inline-blocks:
HTML:
<section>
<div>la-la-la</div>
</section>
CSS:
section {
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
}
div {
display: inline-block;
border: 1px solid red;
color: red;
}
JSFiddle
I encourage You to check two nice tutorials (quick read):
http://www.barelyfitz.com/screencast/html-training/css/positioning
http://learnlayout.com/position.html
I think You need to describe position like this:
div#popup{
position: fixed;
bottom: 0;
right: 50%;
}
First off, you should never use fixed positioning to get your footer to stick to the bottom. To get the footer to stick to the bottom of the screen, set all your divs to relative, then add an extra div the same height as the footer (set a height for your footer) between the content and the footer. Then put a margin of negative that height on your content div. Works perfectly.
To centre it, use width auto and margin left and right auto or just use text-align center
I am trying to center an image of a phone vertically. The code I have to far works but if I decrease the window height the phone image will overlap the header. What I want to do is center the phone image vertically between the bottom of the header and the bottom of the window and stay there no matter how tall the window is (but not overlap the header).
Link to jsfiddle: jsfiddle.net/#&togetherjs=zAMDokl6RG.
Having lots of issues with this. Could someone give me some pointers on how to do this please? Thanks :
css:
* {
margin: 0;
padding: 0;
/* To keep our header correct */
}
#header {
background: #e9e6e6;
/* Here set your colour */
height: 55px;
width: 100%;
top: 0;
left: 0;
position: absolute;
/* box-shadow: 0px 2px 2px #888888;*/
}
.innerdiv {
position: absolute;
bottom: 0;
right: 0;
padding: 0px 0px;
z-index: -2;
}
.dllogodiv {
position: absolute;
top: 0;
right: 0;
padding: 5px 5px;
}
.centeredImage {
text-align: center;
display: block;
}
.centeredImage img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
<div id="header">My header</div>
</div>
<div class="innerdiv">
<img class="imageCorner" src="http://s4.postimg.org/tyfx93u8p/logo.png">
</div>
<p class="centeredImage">
<img src="http://s4.postimg.org/p12cnzs9l/slide1.png">
</p>
heres a fiddle I put together
the idea is to have a top/middle/bottom. There is a css calc property you can use to calculate something, like height. Assuming you know what the height of your image is (lets say 200px), you can do:
top: calc(50% - 100px);
this will make the top of your image 50% from the top, minus half the size of the image, so that the middle of the image is 50% from the top.
of course, you have to set the middle section to position relative or absolute, and make the image position absolute inside.
This is just one quick way, there are other ways. Then again, usually you want to center something within a div, not the whole page.
I want to be able to display a DIV in a fixed position and have its width fit to content but each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
HTML:
<div class='veil'></div>
CSS:
.veil{
display: inline-block;
position: fixed;
top: 34%;
left: 0;
right: 0;
margin: 0 auto;
background-color: lavender;
}
each time I add position: fixed;, the div gets computed to display: block; and the div becomes full length.
It's not display: block, it's position: fixed makes div stretch relatively to browser window, and since you have left: 0 and right: 0 you observe this behavior that div takes all window width.
Depending on your HTML structure you can use position: absolute instead or as pointed in comments (thanks #Paulie_D) don't use right: 0.
Just add another container.
and split the contradiction in CSS between them.
HTML:
<div class='container'><div class='veil'></div></div>
CSS:
.container
{
position: fixed;
top: 34%;
left: 0;
right: 0;
}
.veil
{
display: inline-block;
margin: 0 auto;
background-color: lavender;
}
I have the following html:
<body>
<h1>Something</h1>
<img id="myid" src='images/bigimage.png'/>
<div id="container">
<div id="fast-back">
<p class="big-font">SOMETHING</p>
<p class="small-font">SOMEThiNG ELSE</p>
</div>
</div>
</body>
And the CCS for it is:
html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
background: url(images/body-background.png) top no-repeat;
min-height: 860px;
height: 860px;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
color: white;
visibility: hidden;
}
#container {
margin: 0 auto;
padding: 0;
position: relative;
min-width: 1336px;
height: 860px;
width: 1336px;
}
#myid{
position: absolute;
left: 50%;
right: 50%;
margin-left: -1280px;
margin-right: -1280px;
z-index: 1004;
}
#fast-back {
position: relative;
margin-left: 15%; /*it moves even using pixel*/
top: 272px;
z-index: 99999;
text-align: center;
width: 126px;
}
However, when I resize the browser window, the "fast-back" div moves to the right.
How can I prevent this behaviour?
Thanks!
Looking at #fastback CSS rule, you are using percentage instead of pixels on margin-left. Change it to pixels as unit of measure.
If you are using percentage as unit of measure, the left margin of the element, in your case, will move in relation to the viewport.
And if you are using pixels, on the other hand, the margin stays on the same location, even if the browser is resized.
Update
The solution is remove the width of the #container. See the following link.
http://jsfiddle.net/jlratwil/LB8rf/1/
The reason why the first solution does not work because the width of the container is set to 1336 pixels and centered aligned via margin: 0 auto. If the browser viewport width reaches beyond 1336 pixels during resize, the #fastback element will move.