Real World Style

Splitting the Difference

Another layout that is typically solved with tables is essentially the opposite of what we accomplished with the FORMs layout. Instead of meeting in the middle, you might want to place two elements at opposite sides of the browser window. This might be a case where you have a small logo that you want at the top right corner of your page, and some navigational elements at the top left:

Here we will use DIVs for aligning things on each side of the containing DIV. The DIV on the left will float left, and contain left-aligned text. The DIV on the right will float right and contain right-aligned text. The reason for using DIVs is that they are block level elements, so if CSS is turned off, or otherwise unavailable, the DIVs will align above each other, rather than next to each other.

CSS:

.left {
  float: left;
  text-align: left;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

.right {
  float: right;
  text-align: right;
  font-weight: bold;
  color: #fff;
  width: 49%;
  }

HTML:

<div style= "width: 350px; background-color: #666;
border: 1px solid #333; padding: 0px; margin: 0px
auto;">

<div class="left">
Home &gt; Products</div>
<div class="right">
[logo]</div>

<div class="spacer">&nbsp;</div>

</div>

What is the div class="spacer" in there for? When you float an element with CSS, it no longer takes up any "space" and any background and/or border will show up above the images instead of surrounding them. We need to add some content other than the floated DIVs into the container DIV to force the background or border to contain the floated elements as well. Add this to your style sheet to take care of that:

div.spacer {
  clear: both;
  }