Login | Contact Us | Site Map | Resources

Advanced CSS

Home > CSS Tutorial > CSS Layouts

CSS Layouts

Laying out your webpage is a process which should begin with a sheet of paper or a graphical computer program, as you decide what you want your website to look like, because the design itself can "make or break" a website all on its own.

For a website layout you will need to decide how many columns are necessary, and if a header and footer will be added. The example that we will be using here is a simple two-column layout with a header, a footer and a width of 100%, which expands and contracts according to the size of your screen:

This layout can be brought to life using the following code:

<html>
<head>
  <title>An HTML And CSS Webpage Layout</title>
</head>
<body style="margin: 0; border: 0;">

  <div style="width: 100%; background: #006DA6;">Header</div>

  <div style="float: left; width: 100%;">
    <div style="margin-left: 280px;">
      <div style="margin-top: 0; background: #FFA100;">
        <br /> <br /> Contents <br /> <br /> <br />
      </div>
    </div>
  </div>

  <div style="float: left; width: 280px; margin-left: -100%;">
    <div style="margin-top: 0; background: #658C00;">
      <br /> <br /> Navigation <br /> <br /> <br />
    </div>
  </div>

  <div style="width: 100%; background: #006DA6;">Footer</div>

</body>
</html>

Better yet, CSS allows us to divide our style from our content and cut down on the clutter by putting all of that CSS into a separate file. The HTML file will contain the following code:

<html>
<head>
  <title>An HTML And CSS Webpage Layout</title>
  <link rel="stylesheet" href="boring-style-file-name.css" type="text/css">
</head>
<body>

  <div id="header">Header</div>

  <div id="content-container1">
    <div id="content-container2">
      <div id="content">
        <br /> <br /> Contents <br /> <br /> <br />
      </div>
    </div>
  </div>

  <div id="navigation-container">
    <div id="navigation">
      <br /> <br /> Navigation <br /> <br /> <br />
    </div>
  </div>

  <div id="footer">Footer</div>

</body>
</html>

The external CSS stylesheet, referenced above as being a file called "boring-style-file-name.css" should contain this code:

body {
  margin: 0;
  border: 0;
}

#header {
  width: 100%;
  background: #006DA6;
}

#content-container1 {
  float: left;
  width: 100%;
}

#content-container2 {
  margin-left: 280px;
}

#content {
  margin-top: 0;
  background: #FFA100;
}

#navigation-container {
  float: left;
  width: 280px;
  margin-left: -100%;
}

#navigation {
  margin-top: 0;
  background: #658C00;
}

#footer {
  width: 100%;
  background: #006DA6;
}

Go ahead and make some files and try it out!