How to Create a 5 Column Tableless CSS Website

104 17
    • 1). Create the framework for an HTML document that consists of a "head" section, where your style sheet will go, and a "body" section, where the structure of your page will go. It should look something like this:

      <html>
      <head>
      <title>My 5-Column Layout</title>
      <style type="text/css">
      <!-- style sheet goes here -->
      </style>
      </head>
      <body>
      <!-- page structure goes here -->
      </body>
      </html>

    • 2). Add a series of "div" elements inside the body section. Each "div" will represent a different section of your page. This page will consist of a header section, five columns in the middle, and a footer section.

      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>

      We use the "id" attribute to label the header and footer because ids can be used when there is only one instance of the element on the page. There's more than one column, so for those elements we use the "class" attribute. So now we've split the page into seven sections, but so far there's no layout.

    • 3). Add the following style rules in between the "style" tags in the "head" section.

      div { border:1px solid black; }
      div.column { float:left; width:200px; height:400px; }

      The first line will give each "div" section of your page a basic border so it's easier to spot the changes you're making.

      The second line will give each "div" that has the class "column" a 200 pixel width, a 400 pixel height, and instructions to float left.

      The "float" element is the most confusing. Usually, "div" elements are block-level elements, meaning they take up an entire line so that nothing can appear next to them. A "div" that is floated left, however, is a "div" that allows other elements to appear to the right of it. Specifying "float:right;" would achieve the same effect, except that elements would be allowed to float to the left of it.

      The end result is that all five columns will line up in a row, because each one allows the next one to appear alongside it.

    • 4). Add the following line underneath the two previous style rules:

      div#footer { clear:both; }

      Since all the columns are floated left, by default the "footer" section would appear to the right of the columns. Using the "clear:both;" rule, the footer appears on its own line below the columns by making sure no floated elements appear next to it.

    • 5). Customize the layout to fit your needs. Change the width and height measurements and use the "margin" and "padding" CSS rules too separate your columns from each other and make sure text inside each column doesn't appear flush with the border.

      If you want the columns to have variable widths, use the "id" attribute to give each column an individual name (such as "column-2"), and then add another CSS rule in your style sheet:

      div#column-2 { width:500px; }

      Finally, if you want your layout to have a specific overall width so it doesn't extend the entire length of your computer screen, enclose all seven "div" sections in one wrapping "div," and give that "div" a fixed width:

      div#wrapper { width:1000px; margin:0 auto; }

      The "margin:0 auto;" rule will center the layout on the screen.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time

Leave A Reply

Your email address will not be published.