PDA

View Full Version : Using height in a CSS layout.



erodriguez927
Oct 20th, 2008, 09:40 PM
I'm building a two-column fixed-width layout and have encountered a problem. I want to get my wrapper and my sidebar to align at the bottom of the page.

The wrapper seems to work however stop at the very bottom. However, the sidebar continues past the wrapper.

Can anyone look at my code and help me out?

Also the layout looks different in IE7 is there something that I can do to make it uniform across browsers?

Here is the 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS Test</title>
<link rel="stylesheet" type="text/css" href="css code 1.css"/>
</head>

<body >
<!-- This is the Wrapper -->
<div class="wrapper">


<!-- Header Start-->
<div class="header">
<h1>This is the header</h1>
<p class="left"><span class="highlight">Ipsum lorem ipso facto de retis callum por retorum axis</span>...Ipsum lorem ipso facto de retis callum por retorum axis...Ipsum lorem ipso facto de retis callum por retorum axis...</p>
</div>
<!-- Header End -->




<!-- Content Start -->
<div class="content">
<h2>This is the content</h2>
<p class="big">
Ipsum lorem ipso facto de retis callum por retorum axis...Ipsum lorem ipso facto de retis callum por retorum axis...Ipsum lorem ipso facto de retis callum por retorum axis...
</p>

<blockquote>Ipsum lorem ipso facto de retis callum por retorum axis...Ipsum lorem ipso facto de retis callum por retorum axis...Ipsum lorem ipso facto de retis callum por retorum axis...</ blockquote>
</div>
<!-- Content End-->



<!-- Right Sidebar Start-->
<div class="sidebar">
<h3> This is the sidebar</h3>
<ul class="navigation">
<li><a>CSS 1</a></li>
<li><a>CSS 2</a></li>
<li><a>CSS 3</a></li>
</ul>
</div>
<!-- Right Sidebar End-->



<!-- Footer Start-->
<div class="footer">
<p> This is the footerghjgjkhgjkgjkgjgjkgjkghjgjkgjkgh</p>
</div>
<!-- Footer End-->



</div>
<!-- Wrapper End-->



</body>
</html>



Here is the CSS:



/*
Two Column fixed-width layout

*/

/* Global Elements */

body {
background-color:#669966;
}

/* The wrapper contains the header, footer, and right sidebar */

div.wrapper {
position:absolute;
background-color:#FF0099;
width:760px;
height:100%;
left:10%;
margin:0px;
padding:0px;
}



div.header {
position:absolute;
top:0px;
background-color:#FFCC66;
height:200px;
font-family:"Courier New", Courier, monospace;
margin:0px;
padding:0px;
}



div.sidebar {
position:absolute;
width:150px;
height:100%;
right:0px;
top:200px;
background-color:#FF0000;
margin:0px;
padding:5px;

}

div.content {
position:absolute;
background-color:#FFFF00;
top:200px;
width:590px;
left:0px;
margin:0px;
padding:5px;
}

div.footer {
position:absolute;
background-color:#00CCFF;
width:600px;
bottom:0px;

}

/* End Global Elements */

span.highlight {
background-color:#FFFF00;
}


h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CC33FF;
}


p.big {line-height: 400%;
background-color:#66CC00
}

p.left {text-align:left;
}

p.right {text-align:right;
text-decoration:underline
}

h2 {text-transform:capitalize;
}

twodayslate
Oct 20th, 2008, 10:11 PM
Does this help you?
http://bonrouge.com/2c-hf-fluid(r).php

BoldUlysses
Oct 20th, 2008, 10:22 PM
Just from a scan of the code: Too much absolute positioning going on.

Here's a two-column fixed-width layout (http://blog.html.it/layoutgala/LayoutGala33.html).

erodriguez927
Oct 20th, 2008, 11:41 PM
Thanks for the examples.