The old two column problem - a new take

codequirks · Sep 17, 2009

Hi there,

To many of you this will seem like a really simple problem (new to this, old hat with SQL) but I have been trying to get this to work for almost all of my spare time over the last two nights and now am like David Hasselhoff in a russian vodka silo!!!

I am simply trying to achieve the following: a single banner, then two columns (of variable and different height) and then a footer that spans them both. If we were doing it by tables it would simply be a colspan=2 on the first and third rows! Only added thing is that the entire lot is encapsulated in a horizontally centered div.

Can any of you help?? Code below - I've stuck the styles in an internal style sheet.

<HTML>
<HEAD>
<STYLE type="text/css">

html {height:100%;}
body {height:100%; margin: 0px;}

div.constructor {height:100%; border: 1px solid gray;}
div.center {position: absolute; left: 50%; margin-top: 0px; margin-left: -500px; width: 1000px; border: 1px solid gray;}

div.banner {position: relative; margin-top: 0px; height: 56px; vertical-align: middle; background-image: url(../bkgbanner.jpg);}
div.main {position: relative; width: 1000px;border: 1px solid gray;}
div.left_column {position: relative; left: 0px; top: 0px; width: 625px; border: 1px solid gray;}
div.right_column {position: relative; right: 0px; top: 0px; width: 270px; border: 1px solid gray;}

div.footer {position: relative; left: 0px; width: 1000px; border: 1px solid gray;}
</STYLE>
</HEAD>

<BODY>
<DIV class="constructor">
<DIV class="center">
<DIV class="banner">Content over the banner graphic</DIV>

<DIV class="main">
<DIV class="left_column">This is the left column, variable height data set</DIV>
<DIV class="right_column">This is the right column, second smaller data set</DIV>
</DIV>

<DIV class="footer">The footer</DIV>

</DIV>
</DIV>
</BODY>
</HTML>

traingamer · Sep 17, 2009

Why not some simple floats rather than positioning?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<style type="text/css">
body { margin: 0px; padding: 0px;} 
div.constructor {width: 1000px; margin: auto; border: 1px solid gray;}
div.banner {height: 56px; vertical-align: middle; background-image: url(../bkgbanner.jpg);}
div.main {width: 1000px;border: 1px solid gray;}
div.left_column {float: left; width: 625px; border: 1px solid gray; margin-right: 20px;}
div.right_column {float: left; width: 270px; border: 1px solid gray;}
div.footer {width: 1000px;  border: 1px solid gray;}
</style>
</head>
<body>
<div class="constructor">

  <div class="banner">Content over the banner graphic</div>
  
  <div class="main">
  <div class="left_column">This is the left column, variable height data set</div>
  <div class="right_column">This is the right column, second smaller data set</div>
  </div>        
  <div class="footer">The footer</div>    
</div>

</body>
</html>

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

codequirks · Sep 17, 2009

Well it was simple in the end

Did as you suggested and then added clear:both into the footer and hey presto

Thanks

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

The old two column problem - a new take

codequirks

Programmer

traingamer

Programmer

codequirks

Programmer

Similar threads

Part and Inventory Search

Sponsor