Forum Moderators: not2easy
I modified it a little to my specs/needs it works perfect in IE alignes everything in center, just like I need. But it alignes everything to the left in FF and Safari, I can't figure it out, can anyone please help me align it all to the center. And one more thing in IE it shows 1px of red on the bottom and on the right, couldn't get rid of it as well, please help.
Thanks.
<!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=windows-1251" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
html, body {
margin: 0;
padding: 0;
color: #ffffff;
height: 100%;
width: 100%;
text-align: center;
}
#container {
position: relative;
width: 100%;
min-height: 100%;
text-align: center;
background: #ff0000;
}
* html #container {
height: 100%;
width: 100%;
}
#header {
position: absolute;
top: 0px;
height: 100px;
width: 100%;
background: #00ff00;
left: 50%;
margin: 0 0 0 -50%;
}
#contents {
position: absolute;
background: #ffff00;
color: #000;
height: 300px;
width: 100%;
top: 100px;
left: 50%;
margin: 0 0 0 -50%;
}
#footer {
position: absolute;
bottom: 0px;
height: 100px;
width: 100%;
background: #0000ff;
left: 50%;
margin: 0 0 0 -50%;
}
#inner_header {
top: 0px;
height: 100px;
width: 1000px;
background: #000000;
}
#inner_contents {
top: 0px;
height: 300px;
width: 1000px;
background: #adadad;
}
#inner_footer {
top: 0px;
height: 100px;
width: 1000px;
background: #000000;
}
</style>
</head>
<body>
<div id="container">
<div id="header"><div id="inner_header">Header</div>
</div>
<div id="contents"><div id="inner_contents">Contents</div></div>
<div id="footer"><div id="inner_footer">Footer</div></div>
</div>
</body>
</html>
From what I can see, everything is contain within the container <div>. In order to center it, the container <div>, it needs a specific width and margin declaration:
#container {
position: relative;
width: 1000px; /* I picked this number as it seems to be used by the inner elements */
margin: 0 auto; /* this will center the container */
padding: 0; /* this will ensure that your inner elements do not force the container width or over-flow */
min-height: 100%;
text-align: center; /* this is not necessary unless you want to center all of your text */
background: #ff0000;
}
Marshall
It does center it if you set width: 1000px
But I need it to be 100% wide, so when I change it, it doesn't work.
Do you think I might need a totaly different solution for having;
header and footer backgrounds 100% wide
and my header and footer contents 1000px wide & centered
having it all vertcaly 100% fluid
What do you think? am I going the right direction with this set up or no?
Thanks
Anton,
#inner_header {
top: 0px;
height: 100px;
width: 1000px;
background: #000000;
margin: auto;
}
#inner_contents {
top: 0px;
height: 300px;
width: 1000px;
background: #adadad;
margin: auto;
}
#inner_footer {
top: 0px;
height: 100px;
width: 1000px;
background: #000000;
margin: auto;
}
*******************************************
BUT! still don't understand how get rid of 1px of red it shows on the bottom and on the right in IE only all others work perfect, someone please help.
Thank you!
Anton
BUT I have now different delema in both FF and IE6, my footer is overlaping my contents and my header if window is resized bottom to top. When there are a lot of contents, they are hidden behind the footer, broke my brain over it, please help.
<!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>
<title>title</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
text-align: center;
}
#container {
position: relative;
width: 100%;
min-height: 100%;
margin: auto;
text-align: center;
background: #FFFFFF;
}
* html #container {
height: 100%;
width: 100%;
}
#header {
position: absolute;
top: 0px;
height: 265px;
width: 100%;
left: 50%;
margin: 0 0 0 -50%;
background-color: #FFCC00;
}
#header_container {
position: relative;
top: 0px;
height: 265px;
width: 984px;
margin: auto;
background-color: #666666;
}
#contents {
position: absolute;
height: 200px;
width: 100%;
top: 265px;
left: 50%;
margin: 0 0 0 -50%;
background-color: #003399;
}
#contents_container {
position: relative;
top: 0px;
height: 200px;
width: 984px;
margin: auto;
background-color: #CCCCCC;
}
#footer {
position: absolute;
bottom: 0px;
height: 275px;
width: 100%;
left: 50%;
margin: 0 0 0 -50%;
background-color: #CC3300;
}
#footer_container {
position: relative;
top: 0px;
height: 275px;
width: 984px;
margin: auto;
background-color: #999999;
}
</style>
<body>
<div id="container">
<div id="header">
<div id="header_container">some header text<br>some header text<br>some header text<br>some header text<br>some header text<br>some header text<br>some header text<br></div>
</div>
<div id="contents">
<div id="contents_container">come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br>come contents text<br></div>
</div>
<div id="footer">
<div id="footer_container">some footer text<br>some footer text<br>some footer text<br>some footer text<br>some footer text<br>some footer text<br>some footer text<br></div>
</div>
</div>
</body>
</html>
heh, please help.
Anton.
Note the following:
1. I used the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Reason: Your doctype was xhtml, but your syntax was HTML eg <br>, not <br/> and I couldn't see any reason you would need xhtml. (Validation helps with problem solving)
2. Positioning and the negative margins (which looked like a positioning fix) have been removed. Reason: Divs are block-level elements that will automatically flow "below" each other down the page without the need to be positioned. (Trying to let the elements behave as they were designed to behave)
3. Borders and background-color have been applied to the outer divs and widths and margins removed from _container divs. Reason: It seemed you were trying to use background-color on the outer divs to get the "border" effect and this forced you to try to find the right width for the _containers. Applying a border to the outer divs makes this calculation unnecessary. Applying a background to the outer divs rather than the _container gives you more freedom to apply styles to the _container divs and their content if you wish. (Trying to style the elements highest in the document to avoid redundancy and allow the cascade (as in cascading style) does the rest)
4. Heights have been removed from most elements (although I've left in a couple to show the effect). Reason: Explicitly setting a height on the outer divs means excess content will be cropped in user agents that honour height unless you then start setting min-height or overflow. Not setting a height means the div will expand to contain all content. (Trying to interfere as little as possible)
5. Tested in ff 2.0,3.01, Safari for windows, ie 6 &7, Opera 9.02, NS 8. (At least it looks as I think you wanted it to look.)
html, html * {
margin:0;
padding:0;
}html, body {
text-align: center;
}#container {
background: #FFF;
}#header, #contents, #footer {
border-width:0.6em;
border-style: none solid;
}#header {
border-color:#FC0;
background-color: #666;
}#header_container {
height: 265px;
}#contents {
border-color:#039;
background-color: #CCC;
}#contents_container {
}#footer {
border-color:#C30;
background-color: #999;
}#footer_container {
height: 275px;
}
This is just one possible way to do this. It has imperfections, and could be further simplified - but hopefully gives you something to work with. Keep loving css!
Edit - add explanantion: In the example widths are 100% - the desired 1000px forces horizontal scroll bars on smaller resolutions
1. footer is not being stuck to bottom
2. contents should have minimum height and stratch 100% depending on the screen
3. contents don't have any minimum width
here is table-only set up I need please check it out
<html>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#FFCC00">
<td height="200" align="center">
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200" align="center" bgcolor="#666666"><h2>beautiful header will go here, 200px fixed height and stuck to the top</h2></td>
</tr>
</table>
</td>
</tr>
<tr align="center" bgcolor="#CC3300">
<td>
<table width="900" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="300" align="center" bgcolor="#999999"><h2>beautiful contents will go here, this is set to 300px minimum height<br>and stratches 100% depending on the screen<br></h2>
<h1>Is this simple setup doable? tables-free, pure 100% lovely css?</h1></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#003399">
<td height="200" bgcolor="#003399">
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200" align="center" bgcolor="#666666"><h2>beautiful footer will go here, 200px fixed height and stuck to the bottom</h2></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
thank you very much for you help but some of my needs are now out of the picture
1. footer is not being stuck to bottom
2. contents should have minimum height and stratch 100% depending on the screen
3. contents don't have any minimum width
Can you clarify what you mean by:
1. "Footer is not being stuck to bottom"? (in the code example it is at the bottom of the page, and removing the positioning stops it from overlapping div#contents)
2. Contents should "stretch 100% depending on the screen"? - (div#contents already stretches 100% viewport width in the code example, it is not 100% vertically, but the equivalent to div#contents in the table example is not 100% either)
You can apply a minimum width and height to div#contents in the css, but my recommendation is to think about what you will achieve. If you do not set height and width explicitly, div#contents will expand/contract to contain the copy (text and images etc) for different viewport sizes, so there is no requirement to also set minimums to avoid "cutting off" the copy. (For this reason it may be possible to remove the explicit heights on the header and footer, or at least avoid px.)
Unless you really need fixed heights and widths, consider using padding and margins on the inner container and copy to get the right amount of "whitespace", and that way you avoid the need to set minimums to stop copy being clipped.
Goal css makes styling simple - avoid introducing complications ;)
1. There is a background stripe that goes across the screen left to right directly on the top. In that stripe there is top navigation menu that has to be always centered and compatible with 1024px minimum screen resolution.
2. Contents are also centered compatible with 1024px minimum screen resolution. Minimum height for contents should be at least 300px. No maximum all depends on the screen size and should stretch top to bottom.
3. 1. There is a background stripe that goes across the screen left to right directly on the bottom. In that stripe there is bottom navigation menu that has to be always centered and compatible with 1024px minimum screen resolution.
Now you example does stretch left to right, but not top to bottom specifically for the contents, as only contents will have different amounts of text images and other stuff. Header and footer should have fixed width and height.
My tablas only set up explains it all try.
Thanks a lot for your help, let me know please.
- Centred fixed width 1024px. (Note this creates a horizontal scroll bar for viewports below 1024.)
- Header fixed 200px height
- Contents minimum 300px height, able to expand (It did expand in the original code example, but had no minimum to prevent it collapsing if the copy was less than 300px height)
- Footer fixed 200px height
Recalling this was authored HTML Strict, adjust the css provided above as follows:
html, body {
margin:0 auto; /* added to centre for moz*/
text-align: center;
}/* new */
body {
width:1024px
}#header_container {
min-height:200px; /* modified from height to avoid contents being clipped if user narrows view-port. If height explicitly desired, change to height:200px; */
}#contents_container {
min-height:300px; /* added - notes as above*/
}#footer_container {
min-height: 200px; /* modified - as for above */
}
<!--[if lte IE 6 ]>
<style type="text/css">
#header_container, #footer_container {
height:200px;
}
#contents_container {
height:300px;
}
</style>
<![endif]-->
IE6 it is ignoring 300px min-height and doesn't align footer to bottom
FF2 & FF3 doesn't align footer to bottom
See your last post doesn't stretch background 100% x 100%
Please take a look
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title> <style type="text/css">
body,h2 { margin: 0; padding:0; }
h2 {padding-top:25px;}
#main_container {
width: 100%;
min-height: 100%;
}
#header { background-color: #FFCC00; }
#contents { background-color: #CC3300; }
#footer { background-color: #003399; }
#header div {
width: 900px;
margin: 0 auto 0 auto;
text-align: center;
}
#contents div {
width: 900px;
min-height: 100%;
margin: 0 auto 0 auto;
text-align: center;
}
#footer div {
width: 900px;
margin: 0 auto 0 auto;
text-align: center;
}
#header div { height: 200px; background-color: #666666; }
#contents div { min-height: 300px; background-color: #999999; }
#footer div { height: 200px; background-color: #666666; }
</style>
</head>
<body>
<div id="main_container">
<div id="header">
<div><h2>beautiful header will go here, 200px fixed height and stuck to the top</h2></div>
</div>
<div id="contents">
<div><h2>beautiful contents will go here, this is set to 300px minimum height and stratches 100% top to bottom depending on the screen<br></h2></div>
</div>
<div id="footer">
<div><h2>beautiful footer will go here, 200px fixed height and stuck to the bottom</h2></div>
</div>
</div>
</body>
</html>
thank you so much for you help, I got it set up little different and just need some final tuneup.
IE6 it is ignoring 300px min-height and doesn't align footer to bottom
FF2 & FF3 doesn't align footer to bottom
Keep at this!
1. See my previous post - ie below 7 (so that's 6) doesn't understand min-height. However, as ie6 will expand height rather than clipping the content (like ff), height can be used for ie6 instead. But the height has to be sent so other browsers can't read it or they will clip the content if it expands beyond 300px. That was the reason for using min-height in the embedded style sheet, then sending height to ie 6 (and below) via the conditional comment.
While you've used min-height in your css for contents, there's no conditional comment. That means ie6 isn't getting a height, so it is only drawing the div high enough to surround the text it contains. Put in the conditional comment and see what happens!
2. Your second-last rule sets #contents div to min-height:200px. Earlier you set it to min-height:100%. The first rule adds nothing, (you're telling #contents div to be 100% of #contents, but there is no height set on #contents, so #contents div doesn't know where to measure the 100% from. Rather than setting heights/min-heights in two places, choose whether to set it on #contents, or #contents div, and try to avoid doubling up.
3. I've copied your code (exactly as posted) and it does "go all the way to the bottom" per your table example in ff. (And doesn't in ie6 because of the lack of a height). Common things to do when code isn't working are to check your code (typo's sneak in), validate (catch what you miss), and /or clear your browser cache to make sure you are seeing the latest version of your edits.
A couple minutes work!
I am using html and sticking to it.
is this actually doable or not? I mean it's looks so simple, but no one can figure this out.
here is the most updated code with requirements in it..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Title</title>
<style type="text/css">
body,h2 { margin: 0; padding:0; }
h2 {padding-top:20px; padding-left:25px;}
#main_container {
width: 100%;
height: 100%;
}
#header { background-color: #F0C000; }
#contents { background-color: #BB2F00; }
#footer { background-color: #269700; }
#header div {
height: 150px;
width: 900px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #FFCC00;
}
#contents div {
height: 300px;
width: 900px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #CC3300;
}
#footer div {
height: 150px;
width: 900px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #2DB000;
}
</style>
</head>
<body>
<div id="main_container">
<div id="header">
<div><h2>beautiful header will go here...<br><br>
* header is set to 150px fixed height (ok, works)<br>
* header should align to the top (and it does! perfect header!)</h2>
</div>
</div>
<div id="contents">
<div><h2>beautiful contents will go here...<br><br>
* content is set to 300px minimum height (ok, works)<br>
* content should stratch 100% top to bottom depending on the screen resolution and the amount of actual contents (and it <u>doesn't</u> stratch if there are not much contents!)</h2>
</div>
</div>
<div id="footer">
<div><h2>beautiful footer will go here...<br><br>
* footer is set to 150px fixed height (ok, works)<br>
* footer should align to the bottom (and it <u>doesn't</u>)</h2>
</div>
</div>
</div>
</body>
</html>
is this actually doable or not? I mean it's looks so simple, but no one can figure this out.
Yes, it is quite doable, wihtout the need for hangings.
A solution to the #contents div not expanding is to use the min-height / conditional comment combination suggested in previous posts. So far as the footer, I understand you want a sticky footer and have found a solution, so have left referencs to that out.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Title</title><style type="text/css">
body,h2 { margin: 0; padding:0; }
h2 {padding-top:20px; padding-left:25px;}#main_container {
width: 100%;
height: 100%;
}#header { background-color: #F0C000; }
#contents { background-color: #BB2F00; }
#footer { background-color: #269700; }#header div {
height: 150px;
width: 900px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #FFCC00;
}#contents div {
min-height: 300px; /*Changed from your "height" so that conforming browsers will "stretch"/expand */
width: 900px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #CC3300;
}#footer div {
height: 150px;
width: 900px;
margin: 0 auto 0 auto;
text-align: left;
background-color: #2DB000;
}</style>
<!-- This is the conditional comment required to set a height for ie (6 and below)-->
<!--[if lte IE 6 ]>
<style type="text/css">
#contents div {
height:300px;
}
</style>
<![endif]--></head>
<body>
<div id="main_container">
<div id="header">
<div><h2>beautiful header will go here...<br><br>
* header is set to 150px fixed height (ok, works)<br>
* header should align to the top (and it does! perfect header!)</h2>
</div>
</div><div id="contents">
<div><h2>beautiful contents will go here...<br><br>
* content is set to 300px minimum height (ok, works)<br>
* content should stratch 100% top to bottom depending on the screen resolution and the amount of actual contents (and it <u>doesn't</u> stratch if there are not much contents!)</h2>
</div>
</div><div id="footer">
<div><h2>beautiful footer will go here...<br><br>
* footer is set to 150px fixed height (ok, works)<br>
* footer should align to the bottom (and it <u>doesn't</u>)</h2>
</div>
</div></div>
</body>
</html>
solution is here [themaninblue.com...]
still figuring out implimentation of it in my template
your footer is not sticking to bottom though...
Sticky footers require a different approach and are a bit more complicated.
Happy coding!
