Forum Moderators: not2easy
I am wanting to create a template which has 2 columns, that have a fixed width and float in the center of the page.
Also I want to have a login header at the top, a header section for logo etc under that, and a footer at the bottom
The login header, and the footer extend across the length of the page.
Heres the problems I am having: I have made a div inside the very top header, where I will put the login details; I want this div to be the same width as the main columns, and centered in the same place, so I can align text to the right and it will line up with the columns. Hope that makes sense. Any suggestions on how to do this?
Also I want both the main columns (content and rightColumm) To extend to the bottom of the page, so the footer will always be at the bottom and the columns will fill the whole page. I have the fixed footer working, but how would I go about getting the columns to extend the length of the page?
I really appreciate your help!
Here is the 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">
<style type="text/css">
html
{
height: 100%;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color:#002C67;
height:100%;
margin:0;
padding:0;
}
p {
padding: 10px;
}
#wrapper {
margin: 0 auto;
width: 900px;
min-height:100%;
position:relative;
height: auto !important;
height: 100%;
}
#topHeader {
color: #FFF;
text-align:center;
width: 100%;
float: left;
height: 30px;
background: #06C;
}
#login {
width: 900px;
position:relative;
background:#000
}
#container {
min-height:100%;
position:relative;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
#content {
float: left;
background: #FFFFFF;
width: 600px;
height:100%;
min-height:100%;
display: inline;
}
#rightcolumn {
color: #333;
background: #06C;
height: 100%;
width: 300px;
float: left;
}
#header {
color: #FFF;
width: 900px;
float: left;
height: 200px;
background: transparent;
}
#footer {
color: #FFF;
position:absolute;
bottom:0;
width:100%;
height:60px;
background: #06C;
text-align:center;
}
</style>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Site</title>
</head>
<body>
<div id="container">
<div id="topHeader">
<div id="login">
Login Here
</div>
</div>
<div id="wrapper">
<div id="header">
<p>This is the Header</p>
<p>^<br />
¦<br />
¦<br />
¦<br />
¦<br />
¦<br />
¦<br />
</p>
</div>
<div id="content">
<p>This is the main content</p><br /><br />
</div>
<div id="rightcolumn">
<p>Right Column</p>
</div>
</div>
<div id="footer">
Footer - LINKS ¦ LINKS ¦ LINKS
</div>
</div>
</body>
</html>
You can work around it though: you can let the parent grow to encompass the largest of it's children and then decorate the parent appropriately.
I have gotten a little further now possibly doing something similar to what you have said.
I have a div that 'wraps' around the 2 columns, and have been able to get his div (called page) to work with height: 100%, problem is that it actually extends past the footer, I'm guessing because of the header divs up the top. I have mucked around with trying to add negative margins almost everywhere in the css code but cant get it to 'cut off' at the footer.
Can you see an error in my code or some way to fix this? Also because I have changed the page div to absolute position to work with the height:100%, it no longer centers in IE, only works in firefox.
Anyway, heres the new 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">
<style>
html, body { height: 100%; margin: 0;
padding: 0;
}
body {
background: #0BA1DE;
font-size: 14px;
font-family: Georgia, "Times New Roman", Times, serif;
text-align: justify;
color: #FFFFFF;
}
#header {
width: 960px;
margin: 0 auto;
height: 60px;
}
#topHeader {
margin: 0;
padding: 0;
background:#0F0;
height:20px;
}
#logo {
width: 960px;
height: 80px;
margin: 0 auto;
background:#FFF
}
#menu {
float: left;
width: 960px;
height: 60px;
background:#0FF;
font-family: Arial, Helvetica, sans-serif;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
/* position:relative;*/
}
.footer {
height:60px; /* Height of the footer */
background:#0F0;
margin: 0 auto;
position:absolute;
bottom:0;
width:100%;
}
.push {
height: 4em;
}
#page {
width: 960px;
background: #000;
height:100%;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
position:absolute;
}
#content {
float: left;
width: 660px;
background:#FFF;
margin: 0;
padding: 0;
height:auto;
}
#sidebar {
float: right;
width: 300px;
margin: 0;
padding: 0;
background:#0CF;
height:auto;
}
</style>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>How To</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div id="topHeader">
</div>
<div id="wrapperTop">
<!-- start header -->
<div id="logo">
</div>
<div id="header">
<div id="menu">
</div>
</div>
<!-- end header -->
</div>
<!-- start page -->
<div id="page">
<!-- start content -->
<div id="content">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- end content -->
<!-- start sidebar -->
<div id="sidebar">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<div class="push"></div>
</div>
<!-- end page -->
<!-- start footer -->
<div class="footer">
</div>
<!-- end footer -->
</body>
</html>
