Advanced CSS Layout

February 5th, 2007 | Design & Development |

Having gone through the beginner css layout, you should be ready for something a little more complicated. This tutorial again works towards creating a layout similar to that of this site. You'll see how to incorporate margins, padding and borders without breaking your layout.
You'll also see how to deal with the IE Double Margin Bug.

So as before you can download the source files here or view the code below.

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="style2.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 class="clear"><!--clear--></div>
  15.     <!--
  16.     The above div.clear is important. Without it, the margin-top of 3px on the footer style is ineffective.
  17.     it is also important that you leave the commented out text inside the div.clear as ie may try to render
  18.     it with a default line height as opposed to invisible and break your layout.
  19.     -->
  20.     <div id="footer">footer</div>
  21. </div>
  22. </body>
  23. </html>

The CSS

PLAIN TEXT
CSS:
  1. /* CSS Document */
  2. body {
  3.     background-color: #e5e5e5;
  4.     color: #FFFFFF;
  5.     font-family: Verdana, Arial, Helvetica, sans-serif;
  6.  
  7.     font-size: 0.7em;
  8.     /*I'm using em here because it defines the base font size for my site.
  9.     all other font sizes will be defined relative to this.
  10.     i.e a h2 might be defined as twice the size of normal body text so that would be 1.4em
  11.     */
  12.  
  13.     line-height: 1.4em;
  14.     /*this sets double line spacing (0.7 * 2 = 1.4)*/
  15.  
  16.     margin-top: 0px;
  17.     /* Some browsers give the body a default top margin of about 10px, if you
  18.     want to get rid of that, set it to 0*/
  19. }
  20.  
  21. /*this style is very important when you start to float blocks around your layout.
  22. A clear element is not visible in your site, it is just used to ensure that blocks
  23. containing floating objects expand to encapsulate them properly.
  24. */
  25. .clear {
  26.     margin: 0px;
  27.     padding: 0px;
  28.     clear: both;
  29.     float: none;
  30. }
  31.  
  32. /*now to set up the elements*/
  33. #border{
  34.     width:780px;
  35.     padding:0px;
  36.     border:none;
  37.     /*
  38.     Our site is going to have a fixed with of 780px.
  39.     When setting heights and widths don't forget the "px" or they won't work.
  40.     */
  41.  
  42.     margin-left:auto;
  43.     margin-right:auto;
  44.     /*setting the left and right margin to auto will force the browser to centre the border block*/
  45.  
  46.     background-color:#FFFFFF;
  47. }
  48. #header{
  49.     height:120px;
  50.     background-color:#6699CC;
  51.     border-bottom:solid 2px #333333;
  52.  
  53.     margin-bottom:3px;
  54.     /*
  55.     this margin pushes elements below the header down by 3px;
  56.     */
  57. }
  58. #left{
  59.     color:#000000;
  60.     border:solid 1px #CCCCCC;
  61.     padding:3px;
  62.     margin-left:3px;
  63.     margin-right:3px;
  64.  
  65.     /*
  66.     this display:inline is required to fix the double margin bug in msie 6
  67.     see http://www.positioniseverything.net/explorer/doubled-margin.html for more information
  68.     */
  69.     display:inline;
  70.  
  71.     /*
  72.     setting the margin of an element does not affect its width or height.
  73.     It does affect where its position and the position of other elements around it.
  74.     This element will now be position 3px left border element.
  76.     Also the center element will be pushed 3px to the right.
  77.     Not that the space available to both the center and right elements is now reduced by 6px
  78.     and their widths must be adjusted accordingly.
  80.     The easiest thing to do is incorporate the width of the margin into the original width we had set for the element.
  82.     original width: 420px;
  83.     width - margins : 420px - 3px -3px = 414px;
  84.     But padding = 3px;
  85.     So Width becomes 414px - 3px - 3px : 408px
  87.     We're not too worried about the height for the moment,
  88.     we'll just take the padding into account so that the element is still 500px high on screen.
  89.     So height becomes 500px - 3px - 3px = 494px
  91.     Furthermore setting a border on your div will affect the overall width and height.
  92.     If you want your block to maintain the intended size onscreen then subtract the total
  93.     width of the borders from width and height.
  94.     i.e. a 1px border all round will add 2px to your width and 2px to your height, so you need to subtract that.
  96.     width = 408px - 1px - 1px = 406px;
  97.     height = 494px - 1px - 1px = 492px;
  99.     Note that you only have to account for borders, padding and margins when you are using fixed pixel dimensions for you
  100.     blocks, when you use percentages these are automatically accounted for.
  101.     */
  102.     width:406px;
  103.     height:492px;
  104.     float:left;
  105.     clear: left;
  106.     /* this makes sure nothing else can float to the left of the element */
  107. }
  108. #center{
  109.     background-color:#3366bb;
  110.     margin-right:3px;
  111.     margin-left:0px;
  112.     padding:3px;
  113.     /*
  114.     no need to set left margin as the left block has already set 3px between them.
  115.     */
  116.  
  117.     /*
  118.     original width: 180px;
  119.     width - right margin : 180px - 3px = 177px;
  120.     But padding = 3px;
  121.     So Width becomes 177px - 3px - 3px = 171px
  122.     */
  123.     width:171px;
  124.     height:494px;
  125.  
  126.     float:left;
  127.     clear:none;
  128. }
  129. #right{
  130.     background-color:#3366dd;
  131.     padding:3px;
  132.     margin-right:3px;
  133.     margin-left:0px;
  134.  
  135.     /*
  136.     this display:inline is required to fix the double margin bug in msie 6
  137.     see http://www.positioniseverything.net/explorer/doubled-margin.html for more information
  138.     */
  139.     display:inline;
  140.  
  141.  
  142.     /*
  143.     original width: 180px;
  144.     width - right margin : 180px - 3px = 177px;
  145.     But padding = 3px;
  146.     So Width becomes 177px - 3px - 3px = 171px
  147.     */
  148.     width:171px;
  149.     height:494px;
  150.     /*
  151.     i'm setting the height just for testing purposes.
  152.     the height of this element would normally be set
  153.     by the content within.
  155.     it is possible to set the min-height for an element
  156.     but it is not supported by Internet Explorer
  157.     */
  158.  
  159.     float:right;
  160. }
  161. #footer {
  162.     /*
  163.     this margin pushes the footer down 3px from the boxes above
  164.     */
  165.     margin-top:3px;
  166.  
  167.     height: 60px;
  168.     background-color: #CCCCCC;
  169.     color: #333333;
  170.     /*
  171.     the following float and clear make the footer block shift to below
  172.     the previous floating elements.
  173.     */
  174.     clear: both;
  175.     float: none;
  176. }


One Response to “Advanced CSS Layout”

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

    [...] Advanced CSS Layout [...]

Leave a Reply