codequirks
Programmer
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>
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>