Archive for the ‘css’ Category
HOW to design Tableless
As, I started introducing DIV tag in my last post. Here is a simple sample that how we can use div in our designs.
In this approach, we want to create a two rows/three columns webpage. We call them ‘Header’, ‘LeftCol’, ‘Main’, ‘RightCol’
First of all we need a proper CSS:
<style type="text/css"> body { margin: 0; padding: 0; } #header { background: #CCFF33; height: 100px; } #leftcol { background: #FF6633; float: left; width: 150px; height: 500px; } #rightcol { background: #FF6633; float: left; width: 150px; height: 500px; } #main { background: #fff; float: left; width: 600px; height: 500px; } div.fixed { width: 900px; margin: 0px auto; } } </style>
CSS is almost everything when you are designing your layout with ‘div’
Here is the sample HTML code:
<div class="fixed"> <div id="header">Header Section</div> <div id="leftcol">Left Section</div> <div id="main">Main Section</div> <div id="rightcol">Right Section</div> </div>
Just remember I used ‘fixed’ class to put all elements in center of page. And not matter what user’s browser size is, content gets 900px of its window.