I want to have the bottom of my wrapper touching the bottom of the browser at all times. But I don't know how to center it horizontally.
url: http://arabic001.com
#wrapper {
position:absolute;
text-align:center;
bottom:0px;
width:1110px;
height:675px;
border:1px white solid;
}
Thanks to John I solved the issue of centering it horizontally. But now the bottom is acting really strange. It switches between being too low (part of the wrapper is eaten up by the bottom of the browser) or there is extra space at the bottom even though the code says bottom:0px;. here is my new code:
#wrapper {
position:absolute;
text-align:center;
bottom:0px;
left:50%;
margin-left:-555px;
width:1110px;
height:675px;
border:1px white solid;
}
left:50%;
margin-left:-555px;
Pad it half way and subtract half the width to the left margin.
http://screensnapr.com/v/dZvq1K.png
Related
I am in the process of creating a simple placeholder page to announce a new website. The page consists of nothing other than
a centered background logo image
a "catch phrase" immediately below that image
I thought this would be easy - I place a positioned background image with its size specified and then place an absolutely positioned h1 header to get the "catch phrase" right below the background image.
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5%;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5%;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
This is working to the understanding that
background-origin:border-box;
background-position:center 37.5% with
background-size:auto 25% would
yield an image with
The background image centered horizontally with its top left hand corner at 37% of its container height (set to 100vh)
The absolutely positioned h1element is at (37.5 + 25)% from the top
For good measure I set padding:0and margin:0on everything. However, the end result is not quite as expected - there is still way too much space between the bottom of the logo image and the top of the h1header. Clearly, I am misunderstanding some aspect of background positioning and/or size here. I'd be much obliged to anyone who might be able to put me on the right track
When using percent for background images, it doesn't work at all as one first think.
When you set background position using percent, that positions the image such that X% of the way across itself aligns with X% of the way across the element. This article at CSS Tricks shows it quite well: percentage-background-position-works
Use viewport height units vh instead
*
{
color:white;
font-family:arial;
margin:0 !important;
padding:0 !important;
}
body
{
background-color:black;
background-origin:border-box;
background-image:url('https://unsplash.it/1064/800');
background-size:auto 25%;
background-position:center 37.5vh;
background-repeat:no-repeat;
height:100vh;
}
h1
{
text-align:center;
position:absolute;
top:62.5vh;
right:0;
left:0;
}
<h1>CSS3 is Cool!</h1>
how to make the blue box always displays in the middle of the red box. when I resize the window, the blue box is in a wrong position.
online sample: http://jsfiddle.net/NVjPF/
. Thanks
<div id="box1">
<div id="box2"></div>
</div>
#box1{
display: block;
background:red;
background-size: 100%;
position: relative;
padding-bottom: 60%;
}
#box2{
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
}
As stated by the others, you need to add
margin:-35px -35px 0 0;
for the box to be centered correctly. It doesn't matter what the screen size is, it will never be truly centered to the middle of the box. The reason for this is because the browser is taking the upper right corner of the box, and putting that in the middle of the box. So in some sense, the box is centered. If you were to have the box set to left:50%; instead of right:50%;, then the box would be centered by the upper left hand corner. So to fix this problem, you take half the width and height, because that will equal the center of the box.
Also, to account for the box breaking out of the red box, I added overflow:auto; to create the scrollbars when needed. If you don't want the scrollbars, then you can change it to overflow:hidden. Either one will work if you don't want any protrusion.
http://jsfiddle.net/burn123/NVjPF/3/
You can use negative margins to account for the difference. In this case, you can add:
margin-right: -35px;
margin-top: -35px;
The 35px stems from half of the size of the inner element. See http://jsfiddle.net/NVjPF/1/ for the live demo.
Try this. Basically, you move the box half way over inside the parent and then bring it back dead center using negative margins equal to half of the box's width and height.
#box2 {
display:block;
background:blue;
position:absolute;
height:70px;
width:70px;
right:50%;
top:50%;
margin:-35px -35px 0 0;
}
Try that, works well for me:
#box2 {transform: translate(-50%, 0%);}
So, for a website, I have the site divided up with divs and iframes: an iframe for a sidebar, an iframe for a footer, and a big div in the middle for the body content. In order to get everything static and well-fitting, I used the code here:
.bodycontent{
position:fixed;
top:0px;
left:150px;
right:0px;
bottom:100px;
overflow:auto;
}
.footerframe {
position:fixed;
left:150px;
bottom:0px;
right:0px;
height:100px;
border-top: 2px solid #888;
border-right: 2px solid #888;
border-top-right-radius:4px;
}
This was intended to get both the main div and the footer iframe to stretch across the page. It works for the main div, but not the footer. What is up with that inconsistency?
There are two problems with your code:
Top/Bottom or Left/Right should be used in pairs always, not in four values. If you use top, don't use bottom; if you use left don't use right.
If you want an element with position fixed to stretch to the whole page, you should give it width:100%
:)
I was trying to horizontally center an image (logo) for every screen size doing something like this
#container {position:relative width:100%; height:100%;}
#logo {position:absolute; top:0; left:50% width:500px; height:100px;}
and it's not working. Do I maybe have to use a width for container in pixels?
#logo {margin-right:auto; margin-left:auto; width:500px; height:100px;}
#logo { height:100px; margin:0 auto; width:500px; }
This is the standard way of centering an image by telling it to automatically determine the space on both the left and right of a fixed size container.
And an example.
I guess it depends on how you define "responsive", but if you mean responsive in the sense that content resizes to accomodate the width of the viewport, then all of the other answers don't meet this criteria since they rely on fixed pixel widths. For example, what happens if the view port is less than 500px?
A similar concept will work with percent widths, and actually be responsive, in that the thing you're centering will be flexible too:
#container { width:100%; height:100%; position:fixed; left:0; right:0; z-index:100;}
#logo { position:fixed; width:80%; z-index:101; left:50%; margin: 10% auto auto -40%;}
If you don't want the "logo" element to get to big (on huge screens), you can add max-width:600px; to limit it, but you'd need to add some media-queries to keep it properly centered on large screens.
I have a bizzare issue, I have a DIV that scrolls inside my page... But within that div I have 'header' that is FIXED.... and because my layout is fluid (100%) wide,it is making the "FXED" div cover over the scrollbars of the div below....
What is the best way to fix this? I have attached a simple screenshot of what's going on... hope it helps.
/* BLUE SECTION */
.floatingHeaderBox {
width: 100%;
}
/* RED BOX BELOW */
.contentBoxRight{
position:absolute;
width:80%;
left:20%;
height:100%;
background-color:#FFF;
border-left:1px solid #CCC;
margin-left:-1px;
}
.contentBoxRight{ overflow:auto; overflow-x:hidden; }
i think you can do it like this http://jsfiddle.net/yuliantoadi/bXukG/1/
i don't have your html, so i made it by my self.
If your floatingHeaderBox is inside your scroll box like this:
<div class="contentBoxRight">
<div class="floatingHeaderBox">Hdr</div>
</div>
You can just add a negative left margin to account for scrollbar. since x-overflow is set to hidden, you will not be able to tell that it moved. Add padding or a sub container to get your desired space back on the left side.
.floatingHeaderBox {
width: 100%;
margin-left:-18px;
}