wk06_Fixed layout & Fluid Layout

Three column fixed layout structure using CSS

Step 1: HTML file structure
Create a new page, then copy and past this code within the tag and save it as index_3colFixed.html

Step 2: CSS file
Now, create a new CSS file called main.css with the CSS below copied into it, and link it to the index_3colFixed.html file


/* ------------------------------
HTML Redefine Tags
------------------------------ */
body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;}

input, form, textarea
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
h1{font-size:18px;}
h2{font-size:14px; color:#999999;}
h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}

a:link, a:visited{color:#0033CC;}
a:hover{text-decoration:none;}

/* ------------------------------
PAGE STRUCTURE
------------------------------ */

/* #container has an absolute width (780 pixel) */

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:28px;}
#navbar a{heigth:28px; line-height:28px; padding:0 8px; display:inline;}

#main{width:auto; display:block; padding:10px 0;}
#column_left{width:460px; margin-right:20px; float:left;}
#column_right{width:160px; margin-right:20px; float:left;}
#column_right_adsense{width:120px; float:left;}
div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}

/* ------------------------------
CUSTOM CLASSES
------------------------------ */

/* Add here your custom classes ... */

sources from http://john-crisp.com/dma500/phpBB3/viewtopic.php?f=13&t=745

Creating a 3 Col FLUID Layout & More

Attach CSS style sheet

.xouter3{
width:80%;
border:1px solid #000;
float:left;
margin:15px 0 15px 9%;
}
.xleftcol3{
float: left;
width: 33%;
background:#809900;
}
.xmiddlecol3 {
overflow:hidden;
background:#eff2df;
}
* html .xmiddlecol3{float:left}
* html .xmiddlecol3 .xinner3{width:100%;}

.xrightcol3 {
float:right;
width: 33%;
background:#d2da9c;
position:relative;
}

sources from http://pmob.co.uk/pob/three-columns-fluid.htm

The Three Column layout

body {
margin:0;
padding: 0;
}
#header {
height: 20px;
background-color: #cecece;
border-bottom: 1px solid #969696;
}
#content {
position:relative;
width:auto;
top: 10px;
margin:0px 330px 0px 250px;
background-color: #ffffff;
padding:10px;
}
#side1 {
position:absolute;
width:200px;
top:30px;
left:10px;
padding:10px;
}
#side2 {
position:absolute;
width:280px;
top:30px;
right:10px;
padding:10px;
}

Reset Reloaded

1. html, body, div, span, applet, object, iframe,
2. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
3. a, abbr, acronym, address, big, cite, code,
4. del, dfn, em, font, img, ins, kbd, q, s, samp,
5. small, strike, strong, sub, sup, tt, var,
6. dl, dt, dd, ol, ul, li,
7. fieldset, form, label, legend,
8. table, caption, tbody, tfoot, thead, tr, th, td {
9. margin: 0;
10. padding: 0;
11. border: 0;
12. outline: 0;
13. font-weight: inherit;
14. font-style: inherit;
15. font-size: 100%;
16. font-family: inherit;
17. vertical-align: baseline;
18. }
19. /* remember to define focus styles! */
20. :focus {
21. outline: 0;
22. }
23. body {
24. line-height: 1;
25. color: black;
26. background: white;
27. }
28. ol, ul {
29. list-style: none;
30. }
31. /* tables still need 'cellspacing="0"' in the markup */
32. table {
33. border-collapse: separate;
34. border-spacing: 0;
35. }
36. caption, th, td {
37. text-align: left;
38. font-weight: normal;
39. }
40. blockquote:before, blockquote:after,
41. q:before, q:after {
42. content: "";
43. }
44. blockquote, q {
45. quotes: "" "";
46. }