Simple Div Layout with CSS: Part II - Hard-StyleSheet PDF Print E-mail
Monday, 04 August 2008 02:43 Written by AK

Part 1 - Part 2 - Part 3


This is the same DIV layout as in Part 1. The only difference is that the CSS style has been separated from the DIV.
The DIVs now sits all by themselves in the BODY of our page and we can now style without any constraints. Way simpler.


This here is the DIV layout to be used between your BODY tags. (notice the missing styles) 
 
  
 
  
   
   
   
  
  
  

 
Left Sidebar H3

 

 
  
 
 
 
  
 
 

 
Main Content  H2


Now this is the styling! It should go between the HEAD and /HEAD tags.

This, as previously, is a straight-forward cut & paste method for styling our layout within the page.

The DIVS in the BODY have ID's assigned to them. These DIV ID's correspond with their respective #ID's in the stylesheet. eg.

...is declared and styled as follows: 
#main {
margin: 10px 230px 10px 130px; 
}

It will all make sense if you go through them by their ID's.

You will also notice that some of the styling has been applied to multiple variables by using comma-separated 'hash' tags. ie. borders, 4-column footer. That is an efficient way of saving you lines of redundant code.

To see the difference in styling, you can refer to Part 1

I hope this guide was useful to those who are learning to style their blogs.

Part 3 will be fairly shorter but I will add to it by answering any questions you may have.

Have a great day!



Comments (0)Add Comment
feedSubscribe to this comment's feed

Add your 2Cents

security code
Write the displayed characters


busy
< Prev   Next >
 
Afrigator