Beginner CSS Layout

February 5th, 2007 | Design & Development |

Firstly, if you don't know what CSS is then I recommend you go to W3Schools and have a look at their simple tutorials. They do a very good job of explaining a lot of the simple stuff.

When you're ready to abandon tables for layouts and embrace CSS then you here is where you want to be.

CSS has loads of little pitfalls and things you end up finding out on your own that you wish someone had told you about. I'm going to try and address some of those in my posts on CSS. First however the basics. I know you can find tutorials like this all over the web, it's just a basic layout. It's important however that you get the simple stuff right before you venture on any further.

You can copy the source for the html and css files below or download the zip here.

When you understand everything that's going on here, have a look at my more advanced CSS tutorial.

I've commented the css as much as possible, if you have any trouble please let me know.

The HTML

PLAIN TEXT
HTML:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>CSS Example</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. </head>
  9. <div id="border">
  10.     <div id="header">header</div>
  11.     <div id="left">left</div>
  12.     <div id="center">center</div>
  13.     <div id="right">right</div>
  14.     <div id="footer">footer</div>
  15. </div>
  16. </body>
  17. </html>

The CSS

PLAIN TEXT
CSS:
  1. body {
  2.     background-color: #e5e5e5;
  3.     color: #FFFFFF;
  4.     font-family: Verdana, Arial, Helvetica, sans-serif;
  5.  
  6.     font-size: 0.7em;
  7.     /*I'm using em here because it defines the base font size for my site.
  8.     all other font sizes will be defined relative to this.
  9.     i.e a h2 might be defined as twice the size of normal body text so that would be 1.4em
  10.     */
  11.  
  12.     line-height: 1.4em;
  13.     /*this sets double line spacing (0.7 * 2 = 1.4)*/
  14.  
  15.     margin-top: 0px;
  16.     /* Some browsers give the body a default top margin of about 10px, if you
  17.     want to get rid of that, set it to 0*/
  18. }
  19.  
  20. /*this style is very important when you start to float blocks around your layout.
  21. A clear element is not visible in your site, it is just used to ensure that blocks
  22. containing floating objects expand to encapsulate them properly.
  23. */
  24. .clear {
  25.     margin: 0px;
  26.     padding: 0px;
  27.     clear: both;
  28.     float: none;
  29. }
  30.  
  31. /*now to set up the elements*/
  32. #border{
  33.     width:780px;
  34.     /*
  35.     Our site is going to have a fixed with of 780px.
  36.     When setting heights and widths don't forget the "px" or they wont work.
  37.     */
  38.  
  39.     margin-left:auto;
  40.     margin-right:auto;
  41.     /*setting the left and right margin to auto will force the browser to centre the border block*/
  42.  
  43.     background-color:#FFFFFF;
  44. }
  45. #header{
  46.     height:120px;
  47.     background-color:#6699CC;
  48. }
  49. #left{
  50.     width:420px;
  51.  
  52.     height:500px;
  53.     /*
  54.     i'm setting the height just for testing purposes.
  55.     the height of this element would normally be set
  56.     by the content within.
  58.     it is possible to set the min-height for an element
  59.     but it is not supported by Internet Explorer
  60.     */
  61.  
  62.     background-color:#336699;
  63.  
  64.     float:left;
  65.     /*
  66.     A float tells an element to move as far left or right as possible until
  67.     its boundaries meet the sides of the element that contains it, or another
  68.     floating element.
  70.     This block is going to float to the far left until it meets the sides
  71.     of the border element which keeps it from going any further.
  72.     */
  73.     clear:left;
  74.     /* this makes sure nothing else can float to the left of the element */
  75. }
  76. #center{
  77.     width:180px;
  78.  
  79.     height:500px;
  80.     /*
  81.     i'm setting the height just for testing purposes.
  82.     the height of this element would normally be set
  83.     by the content within.
  85.     it is possible to set the min-height for an element
  86.     but it is not supported by Internet Explorer
  87.     */
  88.  
  89.     background-color:#3366bb;
  90.  
  91.     float:left;
  92.     clear:none;
  93.  
  94. }
  95. #right{
  96.     width:180px;
  97.  
  98.     height:500px;
  99.     /*
  100.     i'm setting the height just for testing purposes.
  101.     the height of this element would normally be set
  102.     by the content within.
  104.     it is possible to set the min-height for an element
  105.     but it is not supported by Internet Explorer
  106.     */
  107.  
  108.     float:right;
  109.     clear:right;
  110.     background-color:#3366dd;
  111. }
  112. #footer {
  113.     height: 60px;
  114.     background-color: #CCCCCC;
  115.     color: #333333;
  116.     /*
  117.     the following float and clear make the footer block shift to below
  118.     the previous floating elements.
  119.     */
  120.     clear: both;
  121.     float: none;
  122. }


One Response to “Beginner CSS Layout”

  1. Advanced CSS Layout | 1.21 Gigawatts! Says:
    February 5th, 2007 at 5:27 pm

    [...] Beginner CSS Layout [...]

Leave a Reply