How to Position Elements Using CSS

Home >> Web Design >> CSS Positioning Tutorial

The #1 question I receive about web design is positioning elements. For example, people want to know how I added/floated the AdSense unit inside my header of my flat stomach website.

Flat Stomach Header

Below you will learn how to position any kind of element on a page (works for AdSense code, Facebook Like button, Twitter, button, social networking icons, any image, etc.)

I'm going to show you how to set this up on your static HTML website or WordPress blog.

For the sake of this tutorial, I'm going to illustrate positioning with your site's header. However, once you understand the basics, this can be applied to any part of your website.

For Static HTML Websites

If you have a static, HTML website like this one, it's very straightforward if you use a stylesheet, which I hope you do. If you don't, I'll show you how to add an internal stylesheet to your page to make this work as well.

For External Stylesheets

If your static website has an external stylesheet (most common), follow these steps...

Step 1: Open your website's stylesheet in a text editor (Notepad, TextEdit, etc.) This file is typically stored in the same place as your index.html file (homepage) and is usually named style.css or stylesheet.css.

Step 2: Create a new ID.

An ID is a unique identifier that you will use to tell the browser where to place the element (AdSense code, banner, etc.) It always starts with a #.

So for this example, we'll use the ID called #adsenseHeader (Never use spaces.)

Step 3: Copy and paste the following code into your stylesheet starting on a blank line.

#adsenseHeader { position: absolute; top: 100px; left: 350px; }

This tells the browser that you want the AdSense code to be positioned 100 pixels from the top of the header and 350 pixels from the left.

Of course, you will have to adjust the values depending on your site.

Step 4: Important! Make sure that your #header style in your stylesheet is positioned relatively and has the following line...

position: relative;

Look for your site's header ID in the stylesheet. It may look something like this...

#header {background-color: #fff; width: 1000px; }

Your header may be called something slightly different, but it's usually named #header or #head.

So you will add position: relative; after the last attribute so it looks like this.

#header {background-color: #fff; width: 1000px; position: relative; }

If you do not do this, your positioning is not going to work. Anytime you position an element using the absolute CSS attribute, the container that the element is floating in (header) has to be positioned relatively!

Save your stylesheet.

Step 5: Open your HTML page where the AdSense code is going to be placed. Locate the code for your site's header. Insert the following code...

<div id="adsenseHeader">INSERT ADSENSE CODE HERE</div>

Of course you will paste the AdSense code where indicated. And if you are positioning a banner or another image, you would just add the code for the image here instead.

That's it! Your AdSense unit should be floating right where you positioned it.

For Sites With No External Stylesheet or Internal Stylesheet

If your static site does not have an external stylesheet then you can paste the code inside the <head> of your page...

Of course, if you already have an internal stylesheet you don't need the opening and closing <style type> code. Just grab the #adsenseHeader code.

Now simply add the following to your HTML page in the header area...

<div id="adsenseHeader">INSERT ADSENSE CODE HERE</div>

How easy was that? :)

Of course, you can paste any kind of code here. It could be a Facebook Like button, Twitter follow button, or whatever code you want to position.

For WordPress Blogs

Tip: Since updates to WordPress files go live instantly, always back up your files before making any changes. Also, if you want to test this without messing up your live site, create a testing environment on your computer with Instant WP.

For WordPress users this tutorial is a bit tricky because everyone has different themes that are coded differently.

So I'm going to do my best to show you how to apply this to almost any theme. (Note: You may have to adjust the instructions for premium themes.)

Step 1: Login to the WordPress admin panel and go the Editor link under Appearance.

Step 2: Look for your blog's stylesheet. It should be located under Styles in the right column. It will either be named style.css or stylesheet.css.

Step 3: Open the file by clicking the name of the file.

Step 4: Create a new ID for whatever you want to position by pasting the following code on a blank line...

#adsenseHeader { position: absolute; top: 100px; left: 350px; }

This tells the browser you want the element to be positioned 100 pixels from the top of the header and 350 pixels from the left. Feel free to adjust the coordinates to fit your site.

Step 5: Locate your #header style ID for your header. Make sure it is positioned relatively and has the following line...

position: relative;

It may look something like this...

#header {background-color: #fff; width: 1000px; }

Your header may be named something slightly different, but it's usually named #header or #head.

So you will add position: relative; after the last attribute so it looks like this.

#header {background-color: #fff; width: 1000px; position: relative; }

If you do not do this, your positioning is not going to work. Anytime you position an element using the absolute attribute, the container that the element is floating in (header) has to be positioned relatively!

Save your stylesheet.

Step 6: Now locate and open your header template. It's normally called header.php and is also located in the same place as your stylesheet.

Step 7: Scan through the code and make sure you are inside the opening container for the header <div id="header"> for example.

Step 8: Add the following HTML code...

<div id="adsenseHeader">INSERT ADSENSE CODE HERE</div>

Of couse, if you are positioning other things like a Facebook Like button, banner image, etc. you would paste the appropriate code where indicated. I'm just using AdSense for this example.

Voila! You should have a floating AdSense unit (or whatever you decided to position) in your header. Feel free to adjust the coordinates in your stylesheet to move the element wherever you'd like.

Now that you understand how CSS positioning works, you can apply this to any area of your website (footer, sidebar, etc.)

CSS Positioning Troubleshooting Tips

If this does not work for you, check the following things...

1) Be sure your syntax is correct. One missing colon or semicolon will cause this not to work.

2) Make sure that the container you are positioning inside of (header, footer, etc.) is relatively positioned in your stylesheet with the attribute position: relative;

3) Be sure you paste the HTML code with the AdSense code inside the container you are positioning in (<div id="header">)

Learn how to create a CSS horizontal navigation menu.

If you liked this, please share. Thanks!