basically i'm trying to set a footer to the center but when i zoom in / out it moves
this is my code:
div#footer {
font-size:16px;
text-align:center;
position:absolute;
bottom:0;
}
You could try setting either the margins or padding for both the left and right to :50%
You could try positioning your footer absolutely relative this is useful css trick for positioning page elements and making then stay where you put them no matter what.
Basically what you want to do is wrap your footer in a relatively positioned div then make that div 100% wide then absolutely position your footer inside the relatively positioned div, this should make your footer stay exactly in the centre of the screen no matter how the screen size changes.
As this concept is a little abstract to explain I've created some simple demo code to demonstrate what you will see is a pink box positioned in the exact centre of a blue box and no matter how you change the screen side the pink box always stays in the centre of the screen you can zoom in or out you can change the size of the window it doesn't matter hope this helps.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd">
<html>
<head>
<title>absolutely relative positioning demo</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div.wraper
{
height:200px;
width:100%;
position:relative;
background-color:blue
}
div.content
{
height:100px;
width:100px;
background-color:pink;
position:absolute;
left:50%;
top:50px;
margin-left:-50px
}
</style>
</head>
<body>
<div class="wraper">
<div class="content"></div>
</div>
</body>
</html>
I'm trying to have an element with a greater width then the body, but not cause horizontal scrolling.
http://jsfiddle.net/hYRGT/
This hopefully demonstrates my problem somewhat.
The #header contains the #imghead and is set to 960px width.
What I want is the browser to 'think' the page is 960px wide.
Because #imghead is more wide then #header and positioned relative so it's in the center.
I'm not able to use a background-image because #imghead is going to be replaced by a flash component.
I'm also not able to use overflow:hidden because I DO want the element to show outside the 960px. I just don't want it to cause h-scrolling.
I do not want to disable h-scrolling altogether, I'd really love a CSS solution. But if javascript is the only way of dealing with this, I guess it would do.
Can't you just absolutely position it relative to the body, 50% from the left and then on the inner element do a negative left margin of half the total width of the element itself which would center it?
I think I got what I wanted:
http://jsfiddle.net/hYRGT/3/
Just in case jsfiddle would be down:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>WEBSITE title</title>
</head>
<body>
<div id="header">
<div id="imghead"><img src="/img.jpg" alt=""/></div>
</div>
<div id="wrapper" class="index">
<div id="container">SOME CONTENT</div>
</div>
</body>
CSS:
/*RESET*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-family:inherit;font-weight:inherit;font-style:inherit;text-align:left;vertical-align:baseline}
table{border-collapse:collapse;border-spacing:0}
a img,:link img,:visited img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0}
img{display:block}
a{color:inherit}
/*STYLES*/
html, body{
height:100%}
body{
background:#000;
text-align:center;
overflow:auto;
overflow-x:hidden;
overflow-y:auto}
#wrapper{
z-index:12;
position:relative;
height:auto!important;
min-height:100%;
width:100%;
background:#0f0;
overflow:auto;
overflow-x:auto;
overflow-y:visible}
#container{
width:960px;
margin:0 auto;
overflow:auto;
background:#00f}
#header{
z-index:50;
position:relative;
overflow:visible;
width:960px;
margin:0 auto;
height:0px;
background:#f00}
#imghead{
width:1100px;
position:relative;
left:-70px;
background:#ff0}
The content overlaps the header by design,
I hope this helps someone.
1 limitation is that the header does not horizontally scroll,
but in my design that is not necessary.
Tested in FF3, IE8, S4 and C5
I would like to have the following layout
+++++++++++++++++++++++
+Header +
+++++++++++++++++++++++
+Nav+ +
+ + +
+ + +
+ + Content +
+ + +
+++++++++++++++++++++++
so basically a two column layout with a header. I've checked many CSS layout generators on the net, but they just produced me a result where the left navbar is as big as the content in it. I can scale it with "height:500px" or whatever, but i want it to be fullsize (from top to bottom of browser window) all the time. Changing the value with "height:100%" does not work.
If you want to try it out yourself: http://guidefordesign.com/css_generator.php and then select full page, two column layout, with header to see what i mean. If you want you can tell me which property i have to adjust in the generated css file to make it work
You can try this. It works on the browsers I tested (Firefox, IE7+8, Opera, Safari, Chrome). Just play around with the percentage units for header and columns.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>for stackoverflow</title>
<style>
body, html {
padding : 0px;
margin : 0px;
height : 100%;
}
#wrapper {
width:900px;
height:100%;
margin: 0px;
padding: 0px;
}
#header {
height:10%;
background-color:#930;
width:900px;
}
#nav {
background-color:#999;
width:200px;
height:90%;
float:left;
}
#content {
height:90%;
background-color:#363;
width:700px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
</div>
</body>
You might want to have a look at and get the idea from:
Super Simple Two Column Layout
See the demo here.
A little general answer: Look into CSS frameworks, like http://www.blueprintcss.org/ - these let you define grids.
Here's a sample page: http://www.blueprintcss.org/tests/parts/sample.html
Concerning the height problem, try out this (should give you 100% of browser window height for your div all the time):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #123456;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
A solution you can try, is to give the content area a background image which is repeated vertically (1px height and width of your page). The left side of that image would have the nav background color, and the rest would be the color of the content background color ...
Consider the next code:
#container {
width:500px;
}
#inside {
padding:10px;
width:100%;
}
If I choose width:100%; will it be the same as stating "width 480:px" (that is, calculating the padding already) or will it be as "width:500px"
Thanks
Joel
It will be like width:500px and adding the padding it will push the insides of overflow the #container..
But if #inside is a block element, then just giving the padding will make it behave as if it were width:480px
Example at http://www.jsfiddle.net/uA9LV/
It will be the same width as the parent container provided it's a block level element. So #inside will be 500px wide with 10px of padding on every side.
I put this in a sample document and the container div only resized 3 sides (left, top, and bottom).. and the inside div pushed it's boundaries outside of the container by 20px to the right.
I tested in IE8, Firefox 3.6.10, and the latest Chrome. Using various doctypes had no effect.
The code I used was:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<style>
#container {
width:500px;
border: solid 1px blue;
}
#inside {
padding:10px;
width:100%;
border: solid 1px red;
}
</style>
</head>
<body>
<div id="container">
<div id="inside">
Hello World!
</div>
</div>
</body>
</html>
Note: if you remove the Width declaration from the #inside div then you'll get exactly what you want. Which is an inner div that is 480px in width + 10px on each side for padding. See this link for more information on it: Solving the CSS Padding problem.
So, i have a div which i want to take up the entire width of the browser, -40px on each side,
my idea was to have
width: 100%; and margin: 0 -40px; however this does not work.
I dont want to use width: xx% as i have no control over this.
Update
Ok got it going at http://jsfiddle.net/ApcLv/
but now my question is:
How do i get this to be centered?
Wrap it in a another <div> and give the parent <div> a width:100% property, and the child <div> a margin:40px; property:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head >
<title >Example</title>
<style type="text/css">
#wrapper {
width:100%;
}
#main {
margin:40px;
background-color:red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
This is a test
</div>
</div>
</body>
</html>
have a div in a div... the outer div can be 100% wide with a 40px padding and the inner div can be 100% wide too.. which will take up the inner div's width - the 40px padding. :)
Simply
[..]
<body>
<div style="margin: 40px">Blabla</div>
</body>
[..]
..will create a DIV that takes up all available horizontal space, minus 40px on each side.
A block level element always uses all its available horizontal space unless otherwise specified. A div with exactly 40px to each side of the BODY element will thus always be centered. No need for wrappers to achieve this.