The Emporer's New Clothes

So I published two Blogger Templates with the sidebar positioning ABSOLUTE! Great, but of course people started to change the header and got lost (started to change everything and got lost :-) for all that!) ... so (as promised) here is that same layout but with the sidebars FLOATing again. What's in it, then? Nothing fancy, but: * sidebars and main are adjusting when the header is changed; * sidebars are fixed 200px, main is fluid; * the <$BlogItemBody> is embedded in a table, so that <div clear:both> tag is harmless; * there are 5 templates, matching the different Blogger Navbars. The tb_b_20050917_black matches the Black Blogger Navbar: [ View ] [ Download ] The tb_b_20050917_blue matches the Blue Blogger Navbar: [ View ] [ Download ] The tb_b_20050917_darkblue matches the Blue Blogger Navbar: [ View ] [ Download ] The tb_b_20050901_silver matches the Silver Blogger Navbar: [ View ] [ Download ] The tb_b_20050917_tan matches the Tan Blogger Navbar: [ View ] [ Download ] Some basic things ... Lists: I have noticed many people are forgetting to embed their lists in <ul></ul> ... this causing the lists to have bullets outside the sidebars! A list should always be implemented like this: <!-- start right sidebar --> <div id="rightbar"> <div class="side"> <h2 class="sidebar-title">Links</h2> <ul> <li><a href="#" >Link 1</a></li> <li><a href="#" >Link 2</a></li> <li><a href="#" >Link 3</a></li> </ul> </div> </div> <!-- end right sidebar --> Putting text in the sidebars: in order to keep the text 10px inside the sidebar borders, use only paragraphs! <!-- start left sidebar --> <div id="leftbar"> <div class="side"> <div class="sidebar-title">Title</div> <p>Put some text here ...</p> <p>Put some text here ...</p> <p>Put some text here ...</p> </div> </div> <!-- end left sidebar --> To follow: I tried to keep this template really as clean and simple as possible (above all the css styling) ... so there's much to tweak and change and implement ... which probably will work out fine ... as long as you are working precise and methodical! To end: here's some more average flaws: every tag should be closed when closing, nest tags properly, so NOT <p> <a> </p> </a> BUT <p> <a> </a> </p> make it a habbit to close the stand-alones too, so NOT <br> BUT <br /> attributes should have quotes: <img src="image.jpg" /> Be warned ... A few people, after using the template, are complaining about the main part being pushed under the sidebars. True, if one is viewing this in a 800x600 resolution and the main contains images with a width some 400px. That is the drawback of a fluid design! You should - keep the images small enough (or) - consider there aren't many of us left who are viewing in 800x600 (not true!) (or) - give the bigger images a width: 75% (or) - try a fixed layout (it is not so hard to change the template - see showcase). Fixed vs. Fluid Have fun!