Layouts with CSS: Layout without tables #10

Two column webpage layout with CSS

create twocol.css. Then, add the following code to the file:

div#topBanner { text-align: center; padding-bottom: 10px; }

div#bodyLeft { position: absolute; width: 25%; }

div#bodyRight { margin: 5px 25px 25px 225px; width: 75%; }

Your two column webpage will look like

Page Title
Add menu items here
Add your content here

Three column webpage with CSS

Create a file like threecol.css. Put the following code

div#bodyLeft { position: absolute; padding-left: 10px; width: 25%; }

div#bodyCenter { margin-left: 190px; margin-right: 190px; width: 50%; position: absolute; }

div#bodyRight { position: absolute; padding-right: 10px; width: 25%; right: 0%; }

div#topBanner { text-align: center; padding-bottom: 15px; }

Your three column webpage will look as follows

Page Title
Add menu items here
Add your content here
Add your content here

Then, add your text and/or graphics to the file.

From: http://sitestree.com/?p=4730
Categories:10
Tags:
Post Data:2011-05-20 14:21:44

    Shop Online: <a href='https://www.ShopForSoul.com/' target='new' rel="noopener">https://www.ShopForSoul.com/</a>
    (Big Data, Cloud, Security, Machine Learning): Courses: <a href='http://Training.SitesTree.com' target='new' rel="noopener"> http://Training.SitesTree.com</a> 
    In Bengali: <a href='http://Bangla.SaLearningSchool.com' target='new' rel="noopener">http://Bangla.SaLearningSchool.com</a>
    <a href='http://SitesTree.com' target='new' rel="noopener">http://SitesTree.com</a>
    8112223 Canada Inc./JustEtc: <a href='http://JustEtc.net' target='new' rel="noopener">http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning) </a>
    Shop Online: <a href='https://www.ShopForSoul.com'> https://www.ShopForSoul.com/</a>
    Medium: <a href='https://medium.com/@SayedAhmedCanada' target='new' rel="noopener"> https://medium.com/@SayedAhmedCanada </a>

Leave a Reply