Positioning Elements Properly in CSS

Submitted by: 
Language: 
Visitors have accessed this post 1505 times.

Introduction:
This tutorial is on how to position elements properly in CSS.

Template:
Here is the default HTML template containing our head and body for our page...

  1. <head>
  2.  
  3. </head>
  4. <body>
  5.  
  6. </body>
  7. </html>

Linking CSS:
Next, if we were going to be using an external (from the editing HTML/PHP file) CSS file, we would want to link our CSS file in the head tags, like so...

  1. <link rel='stylesheet' href='style.css' type='text/css' />

I'm going to be using inline styling in order for it to be easier to read and understand for you, the reader.

Elements:
So now we want to create some test elements. I will create, a header div, a footer div, a content div, and a sidebar div...

  1. <div class='header'>
  2. </div>
  3. <div class='content'>
  4. </div>
  5. <div class='sidebar'>
  6. </div>
  7. <div class='footer'>
  8. </div>

We want our head to cover the full width of our content page, at the top. Footer is the same as the header but at the bottom. Content will be the majority of the middle (vertically) on the left hand side, while we our sidebar will fill the right side of the page.

Background:
So we can easily tell our divs apart, we are first going to add a background colour to each of them...

  1. style='background-color: black;'

My colours;
Header; Blue
Content; Pink
Sidebar; Orange
Footer; Black

Width & Height:
If you test your page, you will get nothing. That is because although our div's are there (check the page source code), they only have dimensions of 0 x 0 due to not having any content inside of them. We are going to set the heights and widths appropriately. We want our header to be full width, followed by, let's say 120pixels (px) height...

  1. width: 100%; height: 120px;

Content is not the full width due to the sidebar, we'll put 75% leaving 25%. Height will be 600pixels...

  1. width: 75%; height: 600px;

Sidebar is not the full width due to the content, we have 25% left, so we'll use 20% of it leaving 5% as space, etc. We'll use the same height as the content, therefore keeping the page as a grid layout.

  1. width: 20%; height: 600px;

The footer will be the same as the header...

  1. width: 100%; height: 120px;

Now test your page. You can see that it's all fine, except our sidebar is under our content div. Not a very good sidebar, is it?

Siding...?
To make our sidebar 'float' to the right hand side of our page, we'll use the convinient float property, set it to 'right'...

  1. float: right;

We also need our content to be floating left in order to make room for our sidebar floating to the right side of the page...

  1. float: left;

Problems...
Perfect... No? Our header has gone behind our floating divs, and is now directly below the header. Add 'clear:both' to the footer to fix this, so it goes under all floating divs.

  1. clear: both;

Finished!


Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.