Home > CSS > Fixed Method for Positioning Elements in CSS

Fixed Method for Positioning Elements in CSS

October 19th, 2009 Captain Leave a comment Go to comments

This article is short but inculding very useful information. A few years ago, we web programmers are used to make these operations via javascript. However, this wasn’t good method because, computers were not powerful enough. Nowadays, computers are too powerfull and we don’t need to use javascript anymore! Just one thing is required for us: CSS(Cascading Style Sheet).


Look at the top-right of this page. Did you see it? Let’s see how it is done…
Structure 1.0:

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<head>
<style type="text/css">
#[DIV_ID]{
position:fixed;
top:[margin-top];
right:[margin-right];
left:[margin-left];
bottom:[margin-bottom];
}</style></head><body><div id="[DIV_ID]"></div></body>

Example 1.0: Assume that we have a div named “FixDiv” and we want to position it on the top-right of page!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html> <!-- important point -->
<head>
<style type="text/css">
#FixDiv{
position:fixed;
top:0;
right:0;
width:100px;
height:100px;
background-color:#ffffff;
border:1px solid #666666;
line-height:92px;
padding: 4px;
text-align: center;
}</style></head><body><div id="FixDiv"><b>This is fixed!</b></div></body>
This is fixed!

Important Notice: If you don’t add !doctype tag, position:fixed property is not work on IE…

Bookmark and Share
Categories: CSS Tags: , , , , ,
  1. Jon
    December 1st, 2009 at 01:57 | #1
    Reply | Quote

    You might want to consider adding z-index: 100;
    to the div to make sure it stays on top as you scroll down

  2. Shakeel
    December 1st, 2009 at 04:41 | #2
    Reply | Quote

    Have you ever tried this in ie6 ????

  3. Mehmatrix
    December 1st, 2009 at 14:00 | #3
    Reply | Quote

    @Shakeel

    It is not working on ie6… You can take a look at here:

    http://www.howtocreate.co.uk/fixedPosition.html

  4. Amr ElGarhy
    December 21st, 2009 at 04:29 | #4
    Reply | Quote

    If i am putting my CSS in a separate file, where to put this “” ?? in the html file that holds this CSS file?!

  1. No trackbacks yet.
eXTReMe Tracker