Forum Moderators: not2easy
I have put this all in a outer container (bgcontain) and I made the banner 900px wide and this sits at the top nicely.
The left, center and right content are then across the middle and my understanding is that you treat these as 3 boxes amd these fill the available space across the page.
I then have the footer which should positions itself just underneath the left, center and right content but ends up just under the banner at the top.
I have tried making all the columns a set size but this does not make any different. I have tried containing just the banner and the left, center and right content in it's own container but this does not work.
Can anyone point me in the right direction as to what I am doing wrong? I am trying to visualise the boxes which the various content goes into but I am obviously missing something. I assume I have simplfying the code too much which is as follows:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
</title>
<style type="text/css">
#bgcontain {width: 900px; margin: 0 auto; border: solid brown 5px; position: relative;background:blue;}
#leftcontent {position: absolute; left:0px;top:130px;width:112px;height:1600px;border:0px solid #000000; background-image:url(/directory/images/cell_back.gif);background-repeat:repeat-y; }
#centercontent {position: absolute; height:1600px; right:70px; left:115px; top:130px; width:638px; border:0px solid #000; }
#rightcontent {position: absolute; height:1600px; right:0px;top:130px;width:150px;background:#87cefa;border:0px solid #000;}
#banner {background:#ffffff; width:900px;}
#footer {background:#ffffff; width:900px;}
.menu {background-image:url(/directory/images/cell_back.gif);background-repeat:repeat-y; background-color:#ccffcc;}
.logo {background-image: url(/directory/images/logo.jpg);background-repeat:repeat-x;background-color:#87cefa;}
</style>
</head>
<body>
<div id="bgcontain">
<div id="banner">
<!--#include virtual="/ssi/banner.txt"-->
</id>
<div id="leftcontent">
<!--#include virtual="/ssi/left-content.txt"-->
</div>
<div id="centercontent">
<!--#include virtual="/ssi/center-content.txt"-->
</div><!-- End CenterContent-->
<div id="rightcontent">
<!--#include virtual="/ssi/right-content.txt"-->
</div>
</div> <!--End BGCONTAIN-->
<div id="footer">
<!--#include virtual="/ssi/new-footer.txt"-->
</div> <!-- End New Footer-->
</body>
</html>
Thanks in advance.
Regards
If I change the - bgcontain - to ABSOLUTE this means that the outer defined box - bgcontain - will also be in the same place from the settings which I put for it in all resolutions. I want the - bgcontain - to be centralised which is how it works at the moment.
Any other suggestions please.
Regards
A simple 3-column layout can be achived by changing the middle column to use normal positioning. This method however has the drawback that the columns only stretch down as far as they need to in order to contain their content. The CSS for such a design would be somthing like this (I've added background colours so you can see where everything is):
body {width:900px;margin:0 auto;}
#bgcontain {background:#f6f;}
#leftcontent {float:left; background:#f00;width:200px;}
#centercontent {background:#0f0;margin:0 200px;}
#rightcontent {float:right;background:#00f;width:200px;}
#banner {background:#ff6;}
#footer {background:#6ff;clear:both;}This problem of column height has been attempted by several people and (to a limited degree) solved in different ways, but each method has it's own drawback(s). If you really have your heart set on full length columns, then I suggest you google for
css three column layout
