Hi, I'm really hoping somone may be able to help as I'm slightly losing my mind with this one. I'm not a very techy guy and maybe there's something incredibly simple I'm missing off to make this work the way I want it to.
I have this 3 row single column layout where I'm trying to make it appear as though there's a box with border on the page. If you take a look at the code it'll all become a little clearer. Here's the problems I'm having with it though:
1) In IE the left and right borders in the "content" are do not span down to join the "footer"
2) If there's a fair bit of content in the "content" area then this flows over the footer border (on all browsers and platforms). The way around this is to add a "overflow: auto" tag but then I get a scroll bar in the "content" area whereas what I require is a scroll bar on the browser window and the "content" to control the height of the page so you would therefore scroll the browser window and the footer would appear at the bottom of the scrolled page.
I hope all that makes sense and someone out there may be able to help.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
#head { position:absolute; margin-left:-390px; left:50%; top:0; width:780px; height:10px; border-bottom: 30px solid #666; }
#foot { text-align:center; position:absolute; margin-left:-390px; left:50%; bottom:0; width:780px; height:10px; border-top: 30px solid #666; }
#content { position: absolute; top:40px; bottom:40px; width:720px; margin-left:-390px; left:50%; border-right: 30px solid #666; border-left: 30px solid #666;url('(EmptyReference!)');
}
</style>
</head>
<body>
<div id="head">
</div>
<div id="foot"></div>
<div id="content">
Corem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tristique, tortor quis condimentum porttitor, augue leo sollicitudin felis, eu blandit turpis magna quis leo. Curabitur
<p>est. *beep* sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris nec massa. Quisque et felis sed sapien vestibulum elementum. Nulla mattis, velit eget tempor consectetuer, elit sapien sodales quam, placerat convallis nisl velit nec enim. Aenean ultricies. Nam scelerisqu</p>
<p>e adipiscing urna. Aliquam facilisis. Ut tincidunt, felis a cursus pellentesque, magna felis accumsan elit, quis varius lectus justo quis lectus. Mauris et elit non erat egestas molestie. Nam aliquam</p>
<p> turpis pellentesque est. Nunc fermentum tincidunt turpis. Quisque libero. Phasellus convallis, libero et rhoncus ultricies, neque turpis suscipit est, sed accumsan felis ante feugiat pede.</p>
<p></p>
</div>
</body>
</html>
Full Version: Help with 100% height
Because IE doesn't support the "stretching" of a box by positioning with top and bottom offset. At least IE6 doesn't. Overflowing will occur in other browsers too if there is enough content/big enough text size combined with a low enough window.
Ok, but I'm almost there. Check this out - I've also attached the code and image. The bit that I'm struggling with now is to have a 10px margin at the top - I have one at the bottom but not the top - So close yet so far. I've also tested this on all browsers and platforms and it seems to work pretty well. In IE there's a little bit of the image at the very bottom of the window - I'm not sure if this is also the case with IE7?
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen"><!--
html,body {
margin:0;
padding:0;
height:100%;
}
div#container { background-image: url(bk.gif); position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:780px; height: 100%; /* real browsers */
}
div#header { background-color: #fff; height: 0; padding:1em; border-bottom:30px solid #dadada; }
div#content { margin: 0 30px 30px; padding:0 0 30px; /* bottom padding for footer */
}
div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */
background:#fff; height: 10px; border-top:30px solid #dadada; }
--></style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nec dui. Suspendisse luctus laoreet enim. Aliquam erat volutpat. Integer ultrices aliquet est. Nunc nulla. Pellentesque at nisi. Nullam in ipsum. Phasellus tincidunt, libero a dictum lacinia, odio nunc dictum sapien, a accumsan elit metus a ipsum. Donec orci massa, elementum quis, sodales nec, sagittis ut, sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer commodo mauris eget nisl. Cras sollicitudin.
<p>Vestibulum sollicitudin est ut lectus. Aliquam erat volutpat. Nunc sit amet massa. Ut commodo mi sagittis tellus. Aliquam erat volutpat. Fusce venenatis blandit nisl. In viverra odio ac nisl. Aenean dignissim vulputate dolor. Pellentesque libero. Fusce vitae ligula. Maecenas ullamcorper nibh pretium urna. Aenean porttitor tempus tortor. Donec mollis, lectus eget consequat lobortis, ligula tortor fermentum augue, volutpat porta leo lectus sit amet sem. Donec porttitor. Maecenas quis urna. Nunc vel dolor id lorem hendrerit rhoncus. Sed erat. Sed vestibulum vulputate justo. Pellentesque justo elit, ornare eu, tincidunt vitae, pulvinar at, sapien. Maecenas varius condimentum velit.</p>
<p>Vestibulum quis metus sit amet sem facilisis consequat. Vivamus in tellus. Phasellus mollis magna. Integer scelerisque malesuada mauris. Vivamus eu arcu. Morbi convallis sem nec augue. Cras vehicula, nunc ut fermentum pellentesque, dolor lectus condimentum erat, non commodo odio sem id orci. Pellentesque vel risus. Vestibulum lectus. In vehicula vehicula sem. Morbi vitae nulla sit amet turpis pulvinar pretium. Quisque lacus pede, hendrerit non, sodales vel, pretium nec, felis. Curabitur vehicula orci ultricies tellus. Curabitur est lectus, volutpat at, gravida non, eleifend id, odio. </p>
</div>
<div id="footer">
<p></p>
</div>
</div>
</body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen"><!--
html,body {
margin:0;
padding:0;
height:100%;
}
div#container { background-image: url(bk.gif); position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:780px; height: 100%; /* real browsers */
}
div#header { background-color: #fff; height: 0; padding:1em; border-bottom:30px solid #dadada; }
div#content { margin: 0 30px 30px; padding:0 0 30px; /* bottom padding for footer */
}
div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */
background:#fff; height: 10px; border-top:30px solid #dadada; }
--></style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin nec dui. Suspendisse luctus laoreet enim. Aliquam erat volutpat. Integer ultrices aliquet est. Nunc nulla. Pellentesque at nisi. Nullam in ipsum. Phasellus tincidunt, libero a dictum lacinia, odio nunc dictum sapien, a accumsan elit metus a ipsum. Donec orci massa, elementum quis, sodales nec, sagittis ut, sem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Integer commodo mauris eget nisl. Cras sollicitudin.
<p>Vestibulum sollicitudin est ut lectus. Aliquam erat volutpat. Nunc sit amet massa. Ut commodo mi sagittis tellus. Aliquam erat volutpat. Fusce venenatis blandit nisl. In viverra odio ac nisl. Aenean dignissim vulputate dolor. Pellentesque libero. Fusce vitae ligula. Maecenas ullamcorper nibh pretium urna. Aenean porttitor tempus tortor. Donec mollis, lectus eget consequat lobortis, ligula tortor fermentum augue, volutpat porta leo lectus sit amet sem. Donec porttitor. Maecenas quis urna. Nunc vel dolor id lorem hendrerit rhoncus. Sed erat. Sed vestibulum vulputate justo. Pellentesque justo elit, ornare eu, tincidunt vitae, pulvinar at, sapien. Maecenas varius condimentum velit.</p>
<p>Vestibulum quis metus sit amet sem facilisis consequat. Vivamus in tellus. Phasellus mollis magna. Integer scelerisque malesuada mauris. Vivamus eu arcu. Morbi convallis sem nec augue. Cras vehicula, nunc ut fermentum pellentesque, dolor lectus condimentum erat, non commodo odio sem id orci. Pellentesque vel risus. Vestibulum lectus. In vehicula vehicula sem. Morbi vitae nulla sit amet turpis pulvinar pretium. Quisque lacus pede, hendrerit non, sodales vel, pretium nec, felis. Curabitur vehicula orci ultricies tellus. Curabitur est lectus, volutpat at, gravida non, eleifend id, odio. </p>
</div>
<div id="footer">
<p></p>
</div>
</div>
</body>
Okay I've now changed the css slightly and now have a 10px space at the top of the page. The only issue I now have is a constant scroll bar in Safari 
The new code:
div#header { background-color: #fff; height: 9px; padding-top: 1px; border-bottom:30px solid #dadada; }
The new code:
div#header { background-color: #fff; height: 9px; padding-top: 1px; border-bottom:30px solid #dadada; }
All sorted. This "<p></p>" was causing the scroll bar to appear in Safari.
Umm, it actually doesn't seem to work - problem being the main content area appears under the footer when you adjust the browser size..
The one I've been basing it on is this http://www.xs4all.nl/~peterned/examples/csslayout1.html which seems to be similar to what I'm after.
Back to the drawing board!!!
The one I've been basing it on is this http://www.xs4all.nl/~peterned/examples/csslayout1.html which seems to be similar to what I'm after.
Back to the drawing board!!!
Okay, I'm almost there! Here's what I have for the code - the only problem now is a constant scroll bar in Safari 3 (not sure about Safari 2) and no other browser:
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen"><!--
html,body {
margin:0;
padding:0;
height:100%;
}
div#container {
background-image: url(images/bk.gif);
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:780px;
height:auto!important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header { background-color: #fff; height: 9px; padding-top: 1px; border-bottom:30px solid #dadada; }
div#content { margin: 0 30px 30px; padding:0 0 30px; /* bottom padding for footer */
}
div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */
background:#fff; height: 10px; border-top:30px solid #dadada; }
--></style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
orem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mollis adipiscing enim. Phasellus dictum augue vel sapien. Aenean ultricies, lorem vel feugiat venenatis, nulla lorem ullamcorper lectus, quis posuere leo neque ac libero. Sed tincidunt. Suspendisse egestas nibh. Aliquam ac odio eget lectus viverra congue. Sed interdum venenatis sem. Ut id enim vitae diam auctor dictum. Nam semper. Sed urna. Ut adipiscing tristique odio.
<p>Donec molestie ultrices leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc velit elit, viverra eu, faucibus vel, varius ut, nisi. Vestibulum iaculis facilisis leo. Vestibulum euismod nunc. Phasellus urna sem, nonummy tristique, imperdiet vitae, venenatis quis, pede. Fusce tempus accumsan nunc. Quisque porttitor. Cras sit amet neque eu sem aliquet mattis. Donec urna enim, cursus ac,</p>
<p></p>
</div>
<div id="footer">
</div>
</div>
</body>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen"><!--
html,body {
margin:0;
padding:0;
height:100%;
}
div#container {
background-image: url(images/bk.gif);
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:780px;
height:auto!important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header { background-color: #fff; height: 9px; padding-top: 1px; border-bottom:30px solid #dadada; }
div#content { margin: 0 30px 30px; padding:0 0 30px; /* bottom padding for footer */
}
div#footer { position:absolute; width:100%; bottom:0; /* stick to bottom */
background:#fff; height: 10px; border-top:30px solid #dadada; }
--></style>
</head>
<body>
<div id="container">
<div id="header">
<h1></h1>
</div>
<div id="content">
orem ipsum dolor sit amet, consectetuer adipiscing elit. Nam mollis adipiscing enim. Phasellus dictum augue vel sapien. Aenean ultricies, lorem vel feugiat venenatis, nulla lorem ullamcorper lectus, quis posuere leo neque ac libero. Sed tincidunt. Suspendisse egestas nibh. Aliquam ac odio eget lectus viverra congue. Sed interdum venenatis sem. Ut id enim vitae diam auctor dictum. Nam semper. Sed urna. Ut adipiscing tristique odio.
<p>Donec molestie ultrices leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc velit elit, viverra eu, faucibus vel, varius ut, nisi. Vestibulum iaculis facilisis leo. Vestibulum euismod nunc. Phasellus urna sem, nonummy tristique, imperdiet vitae, venenatis quis, pede. Fusce tempus accumsan nunc. Quisque porttitor. Cras sit amet neque eu sem aliquet mattis. Donec urna enim, cursus ac,</p>
<p></p>
</div>
<div id="footer">
</div>
</div>
</body>
Maybe Safari 3 has a default padding for div elements. That would make the height of div#container be 100% plus the top padding plus the bottom padding.
Problem solved:
content div was:
div#content {
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
padding:0 0 30px;
}
and it should be:
div#content {
margin-right: 30px;
margin-left: 30px;
padding:0 0 30px; /* bottom padding for footer */
}
content div was:
div#content {
margin-right: 30px;
margin-bottom: 30px;
margin-left: 30px;
padding:0 0 30px;
}
and it should be:
div#content {
margin-right: 30px;
margin-left: 30px;
padding:0 0 30px; /* bottom padding for footer */
}
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.