Creating a Blogger Template (3)

tag:blogger.com,1999:blog-16217833.post-45836055493675988532007-03-05T19:56:00.000+01:002007-03-24T15:14:52.223+01:00Creating a Blogger Template (3)<div style="margin: 30px 0 20px 20px">... a fluid design ...</div> <div style="border: 2px solid #6699FF; padding: 20px;">This is the third part of the Creating A Blogger Template series: <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template.html">Creating a Blogger Template (1) - from scratch</a> <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-2.html">Creating a Blogger Template (2) - the layout</a> <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-3.html">Creating a Blogger Template (3) - a fluid design</a> <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-4.html">Creating a Blogger Template (4) - variables</a></div> "Yeah, right, of course ..." (you tell me) "That's all really nice and all ... but where is my flexible layout? I want it fluid ... fluid ... fluid ... ." <div style="border: 2px solid #F0F0F0; padding: 10px;">Let's use that last Main - Column - Column page: <div class="shadow" style="padding:0 2px 2px 0"><a href="http://thurtest9.blogspot.com/" title="see the working Main-Column-Column" ><img src="http://www.thurbroeders.nl/images/200703/p9-mss.jpg" style="top:-7px;left:-7px" alt="See the working Main-Column-Column" /></a></div><div style="clear: both;"></div> [ click image to view page ]</div> The following layout styling was implemented: ( see <a href="http://thrbrtemplates.blogspot.com/2007/03/creating-blogger-template-2.html">Creating a Blogger Template (2)</a> ) <div style="background-color: #F0F0F0; padding: 20px;">body {      margin: 0px;      padding: 0px;      } #container {      width: 960px;      margin: 10px auto;      padding: 0 10px;      } #header {      padding: 10px;      } #main {      width: 560px;      float: left;      } #sidebar1, #sidebar2 {      width: 190px;      float: left;      margin-left: 10px;      } #footer {      padding: 10px;      clear: both;      }</div> To change this fixed layout into a flexible one (all columns fluid) only 3 attributes have to be altered: <div style="background-color: #F0F0F0; padding: 20px;">body {      margin: 0px;      padding: 0px;      } #container {      width: 96%;      margin: 10px auto;      padding: 0 10px;      } #header {      padding: 10px;      } #main {      width: 48%;      float: left;      } #sidebar1, #sidebar2 {      width: 24%;      float: left;      margin-left: 10px;      } #footer {      padding: 10px;      clear: both;      }</div> <div style="border: 2px solid #F0F0F0; padding: 10px;">Thus: Main - Column - Column all flexible page !!! <div class="shadow" style="padding:0 2px 2px 0"><a href="http://www.thurbroeders.nl/thurstemplates/tt9mss-fluid.htm" title="see that same working Main-Column-Column but all fluid" ><img src="http://www.thurbroeders.nl/images/200703/tt9mms-fluid.jpg" style="top:-7px;left:-7px" alt="See the working Main-Column-Column fluid" /></a></div><div style="clear: both;"></div> [ click image to view page ]</div> <div style="border: 2px solid #F0F0F0; padding: 10px;">Again this is merely to show how it's done. Once the structure is created the fun part begins ... . Remember: all examples in the last 3 posts are (apart from the layout CSS as added in CaBT 2 & 3) still not styled at all. Everything is pure Browser Default!</div>thurhttp://www.blogger.com/profile/11325683639754912267noreply@blogger.com