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!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

The old two column problem - a new take

Status
Not open for further replies.

codequirks

Programmer
Nov 18, 2008
11
GB
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>
 
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
 
Well it was simple in the end

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

Thanks
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top