I have centred everything on the website fine, its just when I resize the window too small so the div is bigger than the window, the div is stuck to the left of the screen, but I want the div to always be centred. If you don't get what I mean you can view the website here.
The 'div' I'm mainly talking about is the blue 'stroke' just above the footer.
I'm viewing this in Google Chrome
A fixed width with absolute positioning will do it.
.page {
text-align: center;
margin: 75px 0 auto;
width: 1000px;
position: absolute;
margin-left: -500px;
left: 50%;
overflow: hidden;
}
Site.css line 10
Related
Website in question: http://www.flowersbe.com
So I am not having an issue getting the footer to stick to the bottom, my issue is that I have a top margin on my container that pushes the footer down 25px past the bottom of the browser, which is most evident on the contact page of the above site. I want to keep the 25px space at the top but I still want the footer to be fully visible...below is my css for the container and the footer...any ideas on how I can resolve this issue?
html,
body {
height: 100%;
}
#container {
width: 960px;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 25px auto -50px;
background-color: #fff;
}
footer {
clear: both;
width: 960px;
height: 35px;
margin: 0 auto;
padding: 15px 0 0 0;
background-color: #ffebeb;
text-align: center;
}
.push {
height: 50px;
}
I believe that to achieve exactly what you want to do, you would have to introduce some JavaScript to calculate the exact height that #container should be.
It is translating the height of 100% to the exact height of the viewport, then adding the 25px margin on top of that. The only way I can think of to get around that is to use JavaScript to get the height of the viewport and set the height of #container to that value minus 25px.
Possible alternate solutions that don't involve JS:
Just drop the min-height and allow #container to be only as tall as it needs to be.
Use position: fixed on the footer to ensure that the footer is always at the bottom of the viewport, but note that it would sit on top of any content long enough to go beyond the height of the viewport.
Does that give you enough to go on?
I have a white page with only a 500x250 textbox and an image. The page is fluid.
I'm trying to center the textbox at the center of a page, while having a picture fixed to the bottom left of the screen. I partially achieve this with the following css:
.bottom-right { /* used to fix the image to the bottom of the screen */
bottom: 0;
right: 0;
position: fixed;
}
#content {
margin-left: auto;
margin-right: auto;
margin-top: 50%;
width: 500px;
height: 250px;
position: relative;
}
When I vertically resize the window, the image covers the textbox. I would instead like the text to go up.
If I've understood your question correctly, you need to have the "textbox" always over the image that's fixed on the bottom-right corner.
See this working Fiddle Example!
CSS
#content {
width: 500px;
height: 250px;
position: absolute; /* this is the key */
z-index: 1; /* this is the key */
left: 50%;
top: 50%;
margin: -125px 0 0 -250px;
}
CSS position:absolute;
What this does is to place the element #content outside the normal document flow, thus not being affected by other elements or having impact on the layout of later siblings.
CSS z-index:1;
What this does is to move the element up on the document stack, thus placing it over others with a lower value (the default stack level is 0).
See the CSS absolute and fixed positioning - W3C Wiki for further details.
Two options I can think of:
Use CSS media queries and if the viewport is less than a certain height then change the textbox height or position so the image doesn't cover it.
Set a min-height around the parent div and once its less than a certain height, show a vertical scrollbar.
I'm an iPhone Developer mainly, I'm a bit rubbish at CSS and I'm trying to make a webpage for my app.
I want to make my footer have the following properties:
Fixed width of 640px
Centered
Attached to bottom of screen, not page. So when the user resizes the window, the footer is always at the bottom
All the other styling I can do myself, it's just positional styling that I find really difficult.
Can someone please explain to me how to do this in just CSS.
footer {
width: 640px;
margin: 0% -320px;
position: fixed;
left: 50%;
bottom: 0%;
}
Example: http://jsbin.com/imisig/3
Example with heaps of text: http://jsbin.com/imisig/4
Put the footer HTML into a <div id="footer">. And the CSS would be something like this:
#footer {
width: 640px;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -320px;
}
Explanation
The width property sets the width to 640px
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
left: 50% puts the left side of the div to the center of the page
margin-left: -320px - now we have to move it 320px from the left to make it centered
.footer{
width:100%;
position: fixed;
bottom: 0%;
}
position: fixed will make it so it scrolls with the page
bottom: 0px makes it fixed on the bottom of the page (distance to bottom = 0px)
The width property sets the width to 100%
I'm trying to make a page where I have a fixed height header and footer. The header is at the top of the screen (100% width) and the footer is at the bottom (100% width). I want to center a div with variable height content in the space between the header and footer. In the below jsfiddle, it works if the content is shorter than the space, but if the content gets too long, it goes past the footer, and over the header. It also doesn't work at all in IE (surprise, surprise).
Example: http://jsfiddle.net/VrfAU/4/
Edit: I've made some images to try and make this more clear.
Small content
Large Content
I ended up starting over and trying a different approach. The working solution is found in the new jsfiddle below. The idea was to separate the header and footer from the content area so that they would sit on top and bottom. Then it became much easier to center the content area in the space between those (with some hacks for older versions of IE).
http://jsfiddle.net/UYpnC/5/
Try something like this:
.main { min-height: 500px }
http://jsfiddle.net/VrfAU/8/
I used the css property z-index, which controls the stack order to fix this:
I also used position: fixed to fix the header and footer:
I put
#header {
background: black;
width: 100%;
height: 66px;
position:fixed;
overflow: hidden;
z-index: 20;}
.main_wrap {
display: table;
width: 100%;
height: 100%;
margin-top: -88px;
vertical-align: middle;
position: relative;
z-index: -1;
}
#footer {
background: black;
width: 100%;
position: relative;
font-size: 85%;
color: #d0d6e0;
margin-top: -22px;
position: fixed;}
I have one element below another and I am using position relative to drag the bottom element up just a bit so that it overlays the top element.
The paperOverlay element is the last element on the page, vertically speaking, and I want it to extend to the bottom of the browser window. However, the relative nudging of the element's position leaves an equal amount of whitespace at the bottom. Is there any way to avoid this?
The HTML looks like:
div class="container">
<div class="homePage">
<!-- some content -->
</div>
<div class="paperOverlay" style="position: relative; top: -70px;">
<!-- some more content -->
</div>
</div>
And the CSS looks like:
div.container
{
width: 960px;
margin: 0 auto;
}
div.homePage
{
width: 800px;
height: 500px;
}
div.paperOverlay
{
width: 960px;
min-height: 400px;
background: url('Images/Overlay.png') no-repeat top center;
}
Basically, the bottom layer is a white background with a torn paper edge effect at the top. The goal is to have the torn paper edge slightly overlay the bottom of the element above it. I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Could you try a negative margin rather than relative positioning? Also, could you explain a little bit more why you need to do this and post you css so that we can better suggest a solution?
Try setting the height of the paperOverlay element. It should be the actual height minus the amount moved relatively.
I did try margin-top: -70px as suggested below and it fixed the height, but now the elements in the top element lay on top of the overlay, and I want the overlay to be on top.
Try this:
div.container
{
margin: 0 auto;
width: 960px;
}
div.homePage
{
height: 500px;
position: relative;
width: 800px;
z-index: 1;
}
div.paperOverlay
{
background: url('Images/Overlay.png') no-repeat top center;
min-height: 400px;
position: relative;
top: -70px;
/* you can optionally use bottom: 70px; rather than top: -70px */
width: 960px;
z-index: 2;
}
Using position: relative; on both elements and setting the z-index should get the overlay on top of the top element, rather than the other way around.
You may also want to try using display: block; on all elements where you need fixed width/height (especially divs and other containers that need a fixed width/height, like anchors or list items), to prevent collapsing. It will usually resize non-block-level elements to fit their contents and ignore width and height rules otherwise.
Using the "vh" unit worked for me. I could not get it to work with height: calc(100%-50px)
#main-nav{
width: 55px;
background-color: white;
transition: 400ms;
height: calc(100vh - 50px);
}