|
CSS - 3 Columns, Header, Body, Footer Div Layout - Outer Columns Height Stretch Problem
Hello,
I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Similar TutorialsHello, im trying to make Fixed width 3 columns (each column have fixed width) layout 100% height with header and footer. -Well I see alot of examples around the web, but i dont see complete one and im really tired of searching, i made the Fixed width 3 comlumns layout, left and right are absolute position, and center is relative to the header -the problem is that all columns dont fill the whole height of the browser windows, the footer doesnot work good. so the whole thing is missed up, so please show 100% working example of what i need. Thanks in Advanced Samer Hi i want to have a site with 3 columns a header and a footer where the height of the content and both the columns spreads to fill the page even if there is only a few lines of content. Also i wanted to have a margin round the page so that the page doesnt fill the screen horizontal. i cant seem to get it to work correctly does anyone have an example i can look at? cheers Andy I am baffled by what seems like a simple task which I can't seem to find the solution to. I've two columns (#top_left, #top_right) inside a containing div (#top_container). I want both columns to be the same height (100%). So if the column on the right has more content, the column on the left will stretch to match the same height. If I set a fixed height on the containing div (#top_container), it fixes the issue, since at this point my declaration of height:100% on the two columns actually knows what it is supposed to be 100% of. But then I run into overflow issues if the content goes over fixed height and when I try min-height, the columns fail to stretch once more. Here is my code: Code:
<style type="text/css">
#top_container {width:760px;}
#top_left {float:left; height:100%; width:200px;}
#top_right {float:left; height:100%; width:560px;}
</style>
<div id="top_container">
<div id="top_left">Content</div>
<div id="top_right">Content</div>
<br clear="all" />
</div>
I've slimmed down the code and cut out non relevant pieces like font styling, colors, and other non pertinent sections. I have found many different ways of doing the 3 column fluid layout on the net... http://css-discuss.incutio.com/?page=ThreeColumnLayouts But none of theme seem simple enough to implement 3 fluid columns where each column is a percentage. I have found a couple, but modifying the css to find my percentage needs loses the effect often times because the css code is long and complicated with many embeded divs. Isnt there an easy way to have a header at top, 3 columns (20%,60%,20% widths) each stretching the same height and a footer at the end? I thought that floating would work, but i get mixed and undesired output in IE and FF. Thanks to all that contribute. I was looking for ways to make the layout work with header, body and footer that work in IE, Gecko, Safari, etc.. I thought I found a good solution via Google surfing and it looked great. Then I discovered that it doesn't have the "<!DOCTYPE ...>" tag, so I added it and now it is thrown out of wack in most browsers. Does anyone know of a valid css layout that would include the header, the body and the footer that work. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
/* colored borders put on for visual effect only */
body{
height: 100%;
margin: 0;
padding: 0;
}
#spacer{
height: 95%;
float: left;
width: 1px;
font-size: 1px; /* to make sure width is not overridden */
padding: 0;
margin: 0;
background-color: red; /* visual effect only */
}
#contentwrap{
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#content{
padding: 30px;
border-width: 1px;
border-style: solid;
border-color: blue;
}
#footer{
clear: both;
height: 5%;
border-width: 1px 0 0 0;
border-style: solid;
border-color: red;
vertical-align: middle;
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<div id="spacer"></div>
<div id="contentwrap">
<div id="content">
<p>this is the content div</p>
<p> </p>
<p>more content</p>
<p> </p>
<p>and even more</p>
<p> </p>
<p> </p>
</div><!-- content -->
</div><!-- contentwrap -->
<div id="footer">footer</div>
</body>
</html>
I thought I can do this but it doesn't really work as the footer doesn't go all the way down to the bottom when needed... Code: <div id="header"> .... </div> <div id="main"> .... </div> <div id="footer"> .... </div> Thanks, FletchSOD Hello, Below is css I am trying to get to work and use as a template for a two column , header, and footer layout. I can get by with css, but an not a designer so can't figure out the exact specifics on how to do this. I've looked at many sites, make examples, javascripts included, but either they are to hard to fit into what I am looking for or just cause me to hit my head against the wall. I'm trying to get the left columns background to fill height 100% to the footer. The content's doesn't need it because the wrapper's background act's as its color. Also, if either column's height changes past the screen's height. I need the footer to move down too. Currently, I tested if the left-column and the main content goes past the screen's height it will just go past the footer. This works beacuse the css I have currently is making sure that the footer is always at the bottom. Code: <html >
<head>
<title>Untitled Page</title>
<style type="text/css">
html {
overflow-y: scroll; /* forces firefox scrollbar on */
}
body {
margin: 0;
padding: 0;
background: #F2F2F2;
font: 100% Helvetica, Arial, sans-serif;
height: 100%;
}
/* text-align: center; is so that the content will float in the center*/
div.wrapper {
position: relative;
width: 100%;
height: 100%;
text-align: left;
margin-bottom: 42px;
}
div.header {
position: relative;
width: 100%;
background-color: blue;
border-bottom: 1px solid #CCCCCC;
font-size: 1.5em;
height: 42px;
}
div.footer {
position: absolute; bottom: 0;
width: 100%;
background-color: blue;
border-bottom: 1px solid #CCCCCC;
font-size: 1.5em;
height: 42px;
}
div.wrapper .left {
width: 215px;
float: left;
background: yellow;
height: 100%;
min-height: 100%;
}
div.wrapper .right {
width:auto;
margin-left: 215px;
}
div.wrapper .tabs {
background: green;
height: 35px;
}
div.wrapper .mainContent {
}
</style>
</head>
<body>
<div id="header" class="header">header</div>
<div class="wrapper">
<div id="leftColumn" class="left">left content</div>
<div class="right">
<div class="tabs">Tabs go here</div>
<div class="mainContent">Main content goes here</div>
</div>
</div>
<div id="footer" class="footer">footer</div>
</body>
</html>
Any help would be appreciated thanks in advance. Risso Hi, I have a multi-column layout where I want every column to always be the same height. Any one of the columns may be the longest on any given page, so the other columns have to automatically adjust to match that height. Usually I'd just use the faux column technique where you repeat a background image, but that won't work because of two elements on this page: 1. each column has a border all the way around it. 2. one column resizes with the page. I've read the articles on liquid layouts with faux columns, but as far as I can tell those techniques won't work if your columns have borders. Does anyone know any technique that would work here? Thanks. Hello, I have been playing with this for a few days now and I am completely frustrated. The left side bar and the right side bar I need to auto stretch. I veiwed everything in several different browsers and screen resolutions. I orginally hade a body background picture and it worked perfectly except on firefox at 800x600. It was left aligned instead of centered. So.. I made the backrounds and border colors instead. Now the problem is I cannot get them to auto strech - I am very frustrated. It seems to be all messed up in IE5.5 at 800x600. Can anyone take a look and help me? Thanks in advance! If you need the html - I would be glad to provide it. Here is the css file: body { margin: 0px; padding: 0px; background: #666666 url(images/back.png) repeat-y center top; text-align: justify; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; } h1, h2, h3, h4, h5, h6 { font-family: Georgia, "Times New Roman", Times, serif; color: #3399FF; } a { font-weight: bold; text-decoration: none; color: #33CCFF; } a:hover { text-decoration: underline; color: #33CCFF; } /************* HEADER STUFF ************/ #header { width: 995px; height: 200px; margin: 0px auto; padding: 0px 0px; background: yellow; } #header2 { width: 995px; height: 10px; margin: 0px auto; padding: 10px 0px; background: yellow url(images/header.jpg); } #header h1 { margin: 0px; padding: 0px 0px 0px 10px; text-align: left; color: #3399FF; font-size: 3em; text-transform: uppercase; } #header h2 { margin: 0px; padding: 0px 0px 0px 20px; text-align: left; font-size: 1.5em; text-transform: uppercase; } /************* MENU ************/ #menu { width: 995px; margin: 0px auto; padding: 5px 0px 5px 0px; background-color: #000000; height: 28px; } #menu ul { margin: 0px; padding: 0px; list-style: none; text-align: center; margin-top: 12px; } #menu li { display: inline; } #menu a { padding: 5px 19px; text-transform: uppercase; text-decoration: none; font-size: 12px; font-weight: bold; color: #FFFFFF; } #menu a:hover { background-color: #333333; } /************* CONTENT ************/ #content { width: 995px; margin: 0px auto; padding: 0px 0px 0px 0px; } #content h2, #content h3, #content h4, #content h5, #content h6 { font-weight: normal; } #content p, #content ul, #content ol { line-height: 150%; } #left { float: right; width: 680px; padding: 0px 20px 40px 20px; } #right { float: left; width: 230px; padding: 0px 20px 40px 20px; color: #99CCFF; } /************* FOOTER ************/ #footer { clear: both; width: 995px; margin: 0px auto; border-top: 1px solid #666666; background: red repeat-y center top; font-size: 9px; text-align: center; padding: 2px; color: #333333; } #footer2 { clear: both; width: 995px; margin: 0px auto; border-top: 1px solid #666666; background: blue repeat-y center bottom; font-size: 9px; text-align: center; padding: 0px; color: #333333; height: auto; } I've converted my site to a css layout http://www.mrhodges.net and it woks well for the browsers I've checked except ie5 for mac. On this browser it drops the center column below the two floated side columns. Now I know that the browser is no longer supported and all that but wouldn't you know... I work for a school board where almost all of the machines are macs and they are running os9 and you guessed it mac ie5. So of the miniscule number of people running this browser I'm smack dab in the middle of most of them. Consequently I need to figure out how to get my page to display properly as I'd like to use the template to put together the schools's web site. What is the best solution for this problem? I'd rather not have to write two sets of pages and redirect using javascript. I want to do this design: http://hermann.sonyextreme.com/upload/design.png * means it should be "the rest". Just like when working with frames. So the sites height is 100% and width is 800px. I've set it up like this: Code: <div id="container">
<div id="header">
</div>
<div id="main">
<div id="menu">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
But no matter what I try, the css just keeps ****ing with me So do you have any tricks/know any sites who have done this succesfully... or just anything to help me, then I'd love to hear from you Thanks in advance Hermann I'm trying to redo my layout so it will load fast for my users and the way I am doing it is with divs. Anyways I have it finished but I've run into a problem; my columns are all different widths. I want them to all meet at the footer. To see what I mean take a look. http://www.rpgchateau.com/rpgapex/test/test/index.html The css is url is... http://www.rpgchateau.com/rpgapex/test/test/test.css I would rather not replace them with an image to get them to repeat, is there any other way I can do it? Hi. I have a page with 3 absolutely positioned columns. I want the footer to set right underneath the main content. Currently I have a container for the main content and a footer <div> that sits outside of this container. However, certain browsers (NN7 & IE6) are pushing the footer down too far. Anyone know how I can control this? Here's my css: #container{ position:relative; height:100%; width:780px; } #footer { position: relative; top: 0px; left: 0px; clear:both; } I have stumbled onto two issues with my layout. I have a fixed footer and I have my three columns and the problem I am having is that the content hides behind the fixed footer which is what I want. However when the content is just not enough it gets clipped behind the footer and what I'd like is to have i scroll up to the top of the footer in that situation. How would I do that in my css? The second issue is that when I have a lot of content it breaks out of the container div or at least it appears that way. I'd like it to push the columns down inside the container as needed. The css and xhtml arevalid. Here is the link: http://www.lonniebruhn.com/sitelab/ Thanks for your help LB Hello to all those reading A really simple question for the knowledgeable, I suppose, however a question nevertheless. I've attached and image to try and save us all time and be as straightforward as I can. How would I accomplish the following with CSS? Problem: if I use absolute positioning on header and footer, I have difficulties centering them. Problem #2: how can I assign fixed values to header and footer and allow the body to stretch dynamically to accomodate different resolutions and\or content. In other words make the middle piece of the design mobile\fluid. Doh! Nevermind, I fixed my problem. Hello all. I have a site with 2 columns. I would like the left column to be the same height as the right column. The right column will always be longer than the left. Here is what I have so far: Code:
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="GENERATOR" content="vi" />
<title>My page </title>
<style type="text/css">
* { font-family: verdana, arial, helvetica, sans-serif; margin: 0; padding: 0; }
body { background: #0b89b8; margin: 0; padding: 0; }
#container { width: 100%; }
#header {
width: 100%;
color: #ffffff;
font-size: 2em;
padding: 0.5em 0;
text-indent: 0.5em;
background-color: #00ff00;
} /* end #header */
#header p { padding-left: 10%; }
#side_menu {
background-color: #ff0000;
float: left;
margin: 0;
width: 10%;
color: #ffffff;
} /* end .side_menu */
#side_menu ul { list-style-type: none; border-top: 1px solid #ffffff; }
#side_menu ul li { border-bottom: 1px solid #ffffff; padding: 0.5em 0; text-align: center; }
#side_menu ul li a { color: #ffffff; text-decoration: none; }
#content { width: 90%; float: left; background: #ffffff; }
.content_container { clear: both; padding-bottom: 1em; }
.content_header_even, .content_header_odd {
width: 100%;
background-color: #69bfde;
color: #595441;
padding: 0.5em 0;
text-indent: 1em;
} /* end .content_header_even, .content_header_odd */
.content_header_odd { background-color: #b4e8fb; }
.content_graph { float: left; padding-right: 1em; }
.content_graph_info, .content_info { padding: 1em; margin: 1em; }
.content_graph_info { float: left; }
</style>
</head>
<body>
<div id="container">
<div id="header"><p>Header</p></div>
<div id="side_menu">
<ul>
<li><a href="index.php">Home</a></li>
</ul>
</div>
<div id="content">
<div class="content_container">
<p class="content_header_even">Subheader</p>
<div class="content_info">
<p>Number: 34906607<br />
Percent: 21.84%<br />
Size: 1.085<br />
Total size : 11.78%</p>
</div>
<div class="content_graph_container">
<div class="content_graph_info">Text a. </div>
<div class="content_graph_info">Text b.</div>
</div>
</div>
</div>
</div>
</body>
</html>
Any thoughts? Hello, I am looking for a CSS two fixed width columns centered layout with header and footer. Could someone recommend me a good one? Thank You, Miguel Hi I need these 3 columns http://dmumford.bizhat.com/equalheights.htm to be of equal height regardless of what column has the most text in. Could somone please help me with this, I have looked at Paul OB's 2 col example but I am at a puzzle how to do it with my requirements!! Your help is much appreciated! Hi, I am trying to better understand how column heights are displayed, and how to create full height columns. On this page http://tapmeister.com/layout_test/index.html, the column which drives the height of the page is <div id="main">, and the left and right columns do not span the entire column height, and the red <div id="content"> shows at the bottom of both side columns. On this page http://tapmeister.com/layout_test/index2.html, I put less stuff in the center <div id="main"> so it wouldn't drive the height of the page. The green <div id="main">, however, did cover the entire column unlike the left and right column on the earlier page. Can anyone help me understand what is going on, and why one column has full height color yet not the other one? Also, what is the best way to make the left and right column have full height color? I know I can apply a repeating background graphic to <div id="content"> which mimics the appearance of the left and right column, however, it would be nice to do differently if possible. My code is listed below (sorry about the ugly colors!) Thanks Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Layout Test</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {background-color: olive;}
#wrapper
{
width: 100%;
background-color: blue;
margin: auto;
}
#main
{
margin: 0 180px;
background-color: green;
}
#content {background-color: red;}
#side1
{
width:180px;
float:left;
background-color:yellow;
}
#side2
{
width: 180px;
float:right;
background-color:yellow;}
#footer
{
clear:both;
background-color:lime;
border-top: 10px solid black;
}
#header {background-color: purple;}
.clear
{
clear:both;
}
</style>
</head>
<body id="page_bg">
<div id="wrapper">
<div id="header">My Header</div>
<div id="content">
<div id="side2">
<p>Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here. Right Column go here.</p>
</div>
<div id="side1">
<p>Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here. Left Column go here.</p>
</div>
<div id="main">
<p>Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff. Some stuff.</p>
<p><img style="margin: 5px; float: left; width: 250px;" src="lady.jpg" alt="" width="250"></p>
<p>Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff. Some More Stuff.</p>
<div class="clear"></div>
</div>
</div>
</div>
<div id="footer">My Footer</div>
</body>
</html>
|
|||||||