tiamat2012
Programmer
Hey everyone,
I've run into a peculiar problem that I'm sure has come up many times but I've searched the forums and couldn't find a thread that totally solved it (solved parts of it, but still have problems).
I'm trying to do a header, two column (menu on the left, main on the right) and a footer, but I'd like the header to be at the very top and the footer to always be at the very bottom.
I've included the code, can anyone help?
I put an address of a live copy of the site, though the host occasionally goes does (free hosting):
the text is taken from the original place I started the template.
and the main page is:
I've run into a peculiar problem that I'm sure has come up many times but I've searched the forums and couldn't find a thread that totally solved it (solved parts of it, but still have problems).
I'm trying to do a header, two column (menu on the left, main on the right) and a footer, but I'd like the header to be at the very top and the footer to always be at the very bottom.
I've included the code, can anyone help?
I put an address of a live copy of the site, though the host occasionally goes does (free hosting):
the text is taken from the original place I started the template.
Code:
body
{
margin:0px 0px 0px 0px;
height: 100%;
}
[green]
#topmenu
{
position:absolute;
background:green;
width:100%;
height:100px;
text-align: center;
}[/green]
[silver]
#leftcontent
{
float:left;
width:15%;
background:silver;
}[/silver]
[blue]
#rightcontent
{
float: left;
width: 85%;
background:black;
}[/blue]
[red]
#bottommenu
{
clear:both;
background: red;
width: 100%;
z-index:999;
}[/red]
p, h1
{
margin:0px 30px 10px 30px;
color: white;
}
h1
{
padding-top:10px;
}and the main page is:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 2 columns, ALA style</title>
<link rel="stylesheet" type="text/css" href="my.css" />
</head><body bgcolor="white">
[green]<div id="topmenu">
<h1> Top Menu </h1>
Hello World!
</div>[/green]
[silver]<div id="leftcontent">
<h1>rightcontent</h1>
<p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
<a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a href="[URL unfurl="true"]http://validator.w3.org/check?uri=http://glish.com/css/9.asp?noSRC=true">validate</a>?[/URL]
</p>
</div>[/silver]
[blue]<div id="rightcontent">
<h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 2 columns, ALA style</h1>
<h1>leftcontent</h1>
<p>This technique was famously chronicled by Jeffrey Zeldman in his ALA article <a href="[URL unfurl="true"]http://www.alistapart.com/stories/journey/">[/URL] A Web Designer's Journey</a>, and is an extremely easy layout to implement requiring only a simple float:left declaration.</p>
<p><strong>Scroll down for the source.</strong></p>
<p class="greek">Conceptualizing random endpoints in a access matrix provides reach extentions enterprise wide. Respective divisions historically insignificant, upscale trendlines in a management inventory analysis survivabilty format. </p>
<p class="greek">Document-centric projections unfetter traditional auditing practices rivaling central process management. Advanced functionality, easy administration, proclaim the hallmarks of unprecedented opportunity.</p>
<p class="greek">Iteration systemwide engenders economies of scale, cross-media technology, presentation action items and life cycle replication.</p>
<p class="greek">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
<p class="greek">Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. Media sourcing as an acquistion strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is a ultimately futile effort if left in place.</p>
</div>[/blue]
[red]<div id="bottommenu">
<h1>Bottom Menu</h1>
</div>[/red]
</body>
</html>