Forum Moderators: not2easy
My whole point in creating this layout is to help with SEO, and in slower internet connections the content is loaded first, then navigation, etc. There might be some other positives i'm overlooking, maybe accessibility too.
Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Fixed Layout (Fixed-Fixed-Fixed)</title>
<style type="text/css">body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#maincontainer{
width: 840px; /*Width of main container*/
margin: 0 auto; /*Center container on page*/
}
#topsection{
position:absolute;
width:840px;
top:0;
background: #EAEAEA;
height: 90px; /*Height of top section*/
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
}
#contentcolumn{
margin: 90px 190px 0 180px; /*Margins for content column. Should be "0 RightColumnWidth 0 LeftColumnWidth*/
}
#leftcolumn{
float: left;
width: 180px; /*Width of left column in pixel*/
margin-left: -840px; /*Set margin to that of -(MainContainerWidth)*/
background: #C8FC98;
margin-top:90px;
}
#rightcolumn{
float: left;
width: 190px; /*Width of right column*/
margin-left: -190px; /*Set left margin to -(RightColumnWidth)*/
background: #FDE95E;
margin-top:90px;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; /*Margins for inner DIV inside each column (to provide padding)*/
margin-top: 0;
}
</style>
<script type="text/javascript">
/*** Temporary text filler function. Remove when deploying template. ***/
var gibberish=["This is just some filler text", "Welcome to CSS", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="maincontainer">
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fixed</em></b> <script type="text/javascript">filltext(10)</script></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>180px</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>190px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
<div id="footer">Footer Div Here</div>
<div id="topsection"><div class="innertube"><h1>CSS Fixed Layout #3.1-
(Fixed-Fixed-Fixed)</h1></div></div>
</div>
</body>
</html>
this looks good, and I can't forsee any problems can't answer about the stability as the best way to test it is to deploy it with content.
>>potential problems
It almost exactly like one I built (in mine I negative right margin the content, instead of negative lefting the floats but the principle is the same!) I had an issue where some browsers didn't like the negative 100% margin which was easily enough solved, but your solution way looks as if that wouldn't be a prooblem at all :) - If it's of use I have used my template successfully without incident, it's very stable and flexible as you can literally float the columns anywhere, add more columns have them both at one side etc IOW you can have many themes without touching the markup ;)
With regards the SEO and accessibility I do think it's still a good idea to put content first more so for accessibility and small screen readers - however I would put the <h1> at the top and not the bottom, it's the header of the page whoever is reading, listening or indexing ;) menus and sidebars off down the bottom. Perhaps you could incorporate a "skip link", hidden or otherwise, right after the header, this helps accessibility and should arguably be a visible choice too which you should put in for those who might be using PDA's or screenreaders, yes most of the time folks prefer the content first but the option should be given to skip to main navgation?
anyway nice job, and let us know how you get on or if you find any pitfalls/benefits of using it yourself
-Suzy
Thanks again!
Changing margin-left to -839px makes it appear.
