1. Technology

Thinking About Positioning - Using CSS to Layout Your Web Pages

Some Tips to Do CSS Positioning


CSS Positioning Basics

There are a few conventions you should follow to position your content on Web pages using CSS.

  1. Clarify your content before you design your page
    If you design a beautiful page and don't have the content to fill it, you'll have wasted your time. So make sure you know what types of pages and content you'll be building for before you design.
  2. Put your content in blocks
    Even if you don't want your Web page to be "blocky" you should think of your content as blocks or units that can be moved around. Once you know that you have a navigation block, a body block, a pull-quote block, and an information block, you can write your HTML to position them.
  3. Place your content blocks in <div> elements
    I prefer to use <div> elements because they are exactly what they say they are - divisions of your Web page content.
  4. ID your unique divisions using <div id="id_name">
    If you're only going to have one body division, then that <div> element should have an id of "body". Remember that the id attribute must be unique on the page, so only use it for elements where there is only one.
  5. Classify your non-unique <div> elements using <div class="class_name">
    I prefer IDs for the layout portions of your site, because, generally, you can define layouts with unique names for each section. However, if you have, for instance, two pull-quotes on a page, you can't use the id="pullquote" for them, you have to use a class="pull-quote".

Starting to Position with CSS

Once you have a series of <div> tags in your HTML you can start positioning them on your page. There are many ways to do CSS positioning, but I find using float to be the easiest to manage and get my pages showing up how I want them to.

  1. Set a width on your body
    You don't have to do this, but most pages are easier to read if you don't assume that everyone will have their browser set to the same settings as your browser. I like to design for 1024x768 resolution, with a typical width of around 800px. However, I also have done fluid widths using percentages. It's all up to you.
    html, body {
     margin: 0;
  2. Float everything
    Once you have your maximum width, then you can float everything on the page, and have it line up. For example, if you want your navigation <div> to be at the top of the page, you would make it have a width of 100% and float left.
    #nav { width: 100%; float: left; }
    But if you wanted it to be on the right side, you'd make it a width of less than 100% and float right.
    #nav { width: 200px; float: right; }
    Then, anything that comes after it would be floated left, and as long as those elements had a smaller width than 600px (800 - 200), they would slide right in to the left of the navigation.

  3. Use floats to create margins
    One of the great things about floats is that you can use them to create margins without using CSS. For example, if my navigation is on the right and 200px wide and my body content is floated left and 580px wide, there will be a 20px margin between the two elements, without any margin tags at all.
    #nav { width: 200px; float: right; }
     #body { width: 580px; float: left; }
  4. Get multiple columns by nesting <div> elements
    If you want three columns, you create two divs that float left and right, and then in the wider div, you create a second set of two columns that float left and right inside it. HTML:
    <div id="leftside">
     <div id="leftcolumn"> left column </div>
     <div id="centercolumn"> center column </div>
     <div id="rightside"> right column </div>
    CSS (note that the inner divs have a width of 50% because they are half of the outer container, which is the "leftside" div:
    #leftside { width: 66%; float: left; }
     #rightside { width: 33%; float: right; }
     #leftcolumn { width: 50%; float: left; }
     #centercolumn { width: 50%; float: right; }
  5. Test in multiple browsers
    While this technique works most of the time, some browsers react strangely to floats. You may have to play with the widths to get your elements to show up correctly.

©2014 About.com. All rights reserved.