When is it ok to use Absolute Positioning ??

slimboyfatz32 · #1 (**permalink**) Feb 5th, 2008, 09:08

Hi all ,

I am currently designing a site in xhtml/css within Dreameaver and was wondering if in my scenario i SHOULD use Absolute Positioned DIVS ......
The site was designed in Photoshop and sliced into 3 parts (header/body/footer), these 3 slices i want to line up perfectly within dweaver , all inside a container div.
I would assume on this occasion i would use Absolute ??? but not entirely sure!!
Would i use relative Divs and floats...if so how the hell do you do that !!! (lol)

Also .. slightly off subject, should i use em or px for my font sizes ... i tried ems , but even at 1em size the text was rather large on the screen ?!?!

many thanks !!!

Rakuli · #2 (**permalink**) Feb 5th, 2008, 09:27

This wouldn't be a case for using absolute positioning. It probably wouldn't be a case for relative position or even floats either

If you have three parts to your site inside of a wrapper, all you need to do is give the wrapper a width and place three divs.. Head, body, foot inside the wrapper. Make sure these divs have no margins and no white-space between them and they will line up.

take this example (using inline styles but would be better to place them in a style sheet)

HTML: Select all


<div id="wrapper" style="width: 760px; margin: 0 auto; padding:0">
<div id="head" style="margin: 0;height:200px;">
     Header stuff
</div>
<div id="body" style="margin:0;">
Body will grow with content
</div>
<div id="footer" style="margin: 0; height: 100px;">
Footsies
</div>
</div>

slimboyfatz32 · #3 (**permalink**) Feb 5th, 2008, 10:08

thanks for the advice Rakuli , i had absolute positioned divs for those 3 elements !?!? a lot of lines of code in my Stylesheet !!! that worked great .... the only thing now is that a Div containing text that i had positioned over my body Div has now jumped to the very bottom of the screen ?!?

Oh and my navigation div which was positioned like this :

#navigation {
position:relative;
left:439px;
top:0px;
width:532px;
height:62px;
z-index:2;
}

has now done the same thing (damn!!!)

Rakuli · #4 (**permalink**) Feb 5th, 2008, 10:21

Okay, if you need to have a div positioned over an element. That is, out of the flow and not affected by other objects, this is a reason to use absolute positioning.

If you have these divs inside of the body element, make the body position: relative. Then add position: absolute to the elements you want to be placed over the top of the element.

If you are positioning these elements on either side of the body though, it may be better to float the elements to either side. This will mean the content of the body divs will wrap around them.

slimboyfatz32 · #5 (**permalink**) Feb 5th, 2008, 10:57

what do you mean by 'either side of the body' , is this referring to the <body> tags ???

Rakuli · #6 (**permalink**) Feb 5th, 2008, 11:23

The body div -- ie, the second div inside the wrapper from my example above.

slimboyfatz32 · #7 (**permalink**) Feb 5th, 2008, 11:32

would i then code as such :

<div id="body"><div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus neque sit amet odio. Duis fringilla arcu placerat nunc. Cras mattis euismod ante. Aliquam erat volutpat. Aenean pulvinar turpis mattis ipsum. Proin vestibulum semper risus. Maecenas diam. Donec nonummy neque. Etiam suscipit nunc eu tortor. Vivamus volutpat, risus non consectetuer molestie, justo velit consequat mi, sit amet ullamcorper nunc elit aliquet orci. Proin purus turpis, tincidunt ut, lacinia sit amet, pharetra at, lorem. Morbi mattis metus id ipsum iaculis porta. Maecenas ut ipsum sed est commodo placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere lorem. Duis aliquam, est sed euismod scelerisque, tortor felis lobortis arcu, a aliquam nisl urna quis risus. Quisque ac elit vitae turpis porttitor fermentum. Nullam dignissim, massa sed pretium vestibulum, leo elit vulputate urna, in luctus nunc orci in marcus. </p>
</div></div>

can u actually put 2 <div id> within each other ?? is this good practice??

thanks again rakuli

Rakuli · #8 (**permalink**) Feb 5th, 2008, 11:52

You can put two divs within each other. They are block - level elements so this is not problem. If they are unique on the page you can give them both Id's as well.

Provided you're closing all the required elements then it's good practice.

slimboyfatz32 · #9 (**permalink**) Feb 5th, 2008, 12:03

so the code that i posted above would be good practice ???

can i show you this code , just to see if i'm getting it correctly ..............

Quote:

XHTML :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style_screen.css" />

</head>

<body>
<div id="container">

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

<div id="main"></div>

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

<div id="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus neque sit amet odio. Duis fringilla arcu placerat nunc. Cras mattis euismod ante. Aliquam erat volutpat. Aenean pulvinar turpis mattis ipsum. Proin vestibulum semper risus. Maecenas diam. Donec nonummy neque. Etiam suscipit nunc eu tortor. Vivamus volutpat, risus non consectetuer molestie, justo velit consequat mi, sit amet ullamcorper nunc elit aliquet orci. Proin purus turpis, tincidunt ut, lacinia sit amet, pharetra at, lorem. Morbi mattis metus id ipsum iaculis porta. Maecenas ut ipsum sed est commodo placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere lorem. Duis aliquam, est sed euismod scelerisque, tortor felis lobortis arcu, a aliquam nisl urna quis risus. Quisque ac elit vitae turpis porttitor fermentum. Nullam dignissim, massa sed pretium vestibulum, leo elit vulputate urna, in luctus nunc orci in marcus. </p>
</div>
</div>
</body>
</html>

Quote:

* {
margin : 0;
padding : 0;
}

body {
background-image: url(images/background.jpg);
background-attachment:fixed;

}
#container {
position:relative;
width:1000px;
margin: 0 auto;
padding: 0;
z-index:1;

}
#header {
background-image: url(images/header.png);
height:171px;
margin:0;
z-index:2;

}
#main {
background-image:url(images/main.png);
height:967px;
margin:0;
z-index:2;
}
#footer {
background-image:url(images/footer.png);
height:62px;
margin:0;
z-index:2;
}
#navigation {
position:absolute;
left:439px;
top:0px;
width:532px;
height:62px;
z-index:2;
}

#text {
position:absolute;
left:35px;
top:171px;
width:630px;
height:237px;
z-index:2;
}

p {
font: 0.7em Arial, Helvetica, sans-serif;

}

Rakuli · #10 (**permalink**) Feb 5th, 2008, 12:12

This would be incorrect because you are using absolute positioning when there is no reason to. You are using the position to place text inside of the id="main" div. You should just place the text inside this div.

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style_screen.css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
</head>

<body>
<div id="container">

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

<div id="main">

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus neque sit amet odio. Duis fringilla arcu placerat nunc. Cras mattis euismod ante. Aliquam erat volutpat. Aenean pulvinar turpis mattis ipsum. Proin vestibulum semper risus. Maecenas diam. Donec nonummy neque. Etiam suscipit nunc eu tortor. Vivamus volutpat, risus non consectetuer molestie, justo velit consequat mi, sit amet ullamcorper nunc elit aliquet orci. Proin purus turpis, tincidunt ut, lacinia sit amet, pharetra at, lorem. Morbi mattis metus id ipsum iaculis porta. Maecenas ut ipsum sed est commodo placerat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In posuere lorem. Duis aliquam, est sed euismod scelerisque, tortor felis lobortis arcu, a aliquam nisl urna quis risus. Quisque ac elit vitae turpis porttitor fermentum. Nullam dignissim, massa sed pretium vestibulum, leo elit vulputate urna, in luctus nunc orci in marcus. </p>
</div>

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



</div>
</body>
</html>

That will then place the text where you want it without positioning at all. You can place any element inside of a <div> They just form the boundaries of the elements they contain.

slimboyfatz32 · #11 (**permalink**) Feb 5th, 2008, 12:48

thanks again for all the advice rakuli.......how would i now stop the text from stretching from one side of the <main> div to the other , i really only want it going about halfway across the screen.

Would i also use the same practice for a navigation menu which appears over the top of my header? Or would this need to be contained within a seperate Div

ie:

<div id="navigation">
<a class="homeButton" href="index_test.html" title="Home"></a>
<a class="contactButton" href="contact.html" title="Contact Us"></a>
</div>

#navigation {
position:absolute;
left:439px;
top:0px;
width:532px;
height:62px;
z-index:2;

many thanks again for your great advice!!!

Rakuli · #12 (**permalink**) Feb 5th, 2008, 13:28

To stop the text strecthing all the way across the screen you can use

Code: Select all

#main p
{
    width: 50%;
}

That will mean all <p> elements inside of the main div will take up 50% of the horizontal space.

As for the navigation in the top panel, yes you want to put it inside the #head div. If you want it to be along the bottom of the top div, give the #head a position: relative and use the following on a div inside the head with the id of #navigation.

Code: Select all

#navigation
{
    position: absolute;
    bottom: 0px;
    left: 0px;
}

Alternatively, if you are placing an image in your head area and want the navigation to appear underneath it, you only have to place the div after the <img without any position specified.

slimboyfatz32 · #13 (**permalink**) Feb 5th, 2008, 13:47

i am looking at positioning the 'navigation' to the top right of the header. Would this be the correct CSS ......

Quote:

#navigation {
position: absolute;
top: 0px;
right:550px;
}

or would i use the 'left' attribute instead ? (for best practice!!)

is this the correct markup too .....

Quote:

Rakuli · #14 (**permalink**) Feb 5th, 2008, 13:59

If you're looking at position at the top, then don't use any positioning at all

Just use

Code: Select all

#navigation
{
     width: 200px; /*whatever width you want */
     float: right;
     margin: 0;
}

And have that as the first thing inside of the #head div.

The markup is fine...

You can check to be doubly certain at http://validator.w3.org . It has a service that allows you to input code directly.

slimboyfatz32 · #15 (**permalink**) Feb 5th, 2008, 14:11

that did the trick .... so simple but so right !!!!

do you reckon my 'stylesheet' looks in good shape now ? or more refining needed (ie corrections , shorthand etc..)

Quote:

* {
margin : 0;
padding : 0;
}
body {
background-image: url(images/background.jpg);
background-attachment:fixed;
}
#container {
position:relative;
width:1000px;
margin: 0 auto;
padding: 0;
z-index:1;
}
#header {
background-image: url(images/header.png);
position:relative;
height:171px;
margin:0;
z-index:2;
}
#main {
background-image:url(images/main.png);
height:967px;
margin:0;
z-index:2;
}
#footer {
background-image:url(images/footer.png);
height:62px;
margin:0;
z-index:2;
}
#navigation {
width: 532px;
float: right;
margin: 0;
}
a.homeButton, a.homeButton:link, a.homeButton:visited, .active {
background-image: url(images/home_button.png);
display:block;
position:absolute;
width:133px;
height:62px;
z-index:2;
}
a.homeButton:hover {
background-image: url(images/home_button.png);
background-position: -133px 0;

}
a.homeButton:active, .active {
background-image: url(images/home_button.png);
background-position: -266px 0;

}
a.servicesButton, a.servicesButton:link, a.servicesButton:visited, .active {
background-image: url(images/services_button.png);
display:block;
margin-left:133px;
position:absolute;
width:133px;
height:62px;
z-index:2;
}
a.servicesButton:hover {
background-image: url(images/services_button.png);
background-position: -133px 0;

}
a.servicesButton:active, .active {
background-image: url(images/services_button.png);
background-position: -266px 0;
}
a.portfolioButton, a.portfolioButton:link, a.portfolioButton:visited, .active {
background-image: url(images/portfolio_button.png);
display:block;
margin-left:266px;
position:absolute;
width:133px;
height:62px;
z-index:2;
}
a.portfolioButton:hover {
background-image: url(images/portfolio_button.png);
background-position: -133px 0;

}
a.portfolioButton:active, .active {
background-image: url(images/portfolio_button.png);
background-position: -266px 0;
}
a.contactButton, a.contactButton:link, a.contactButton:visited, .active {
background-image: url(images/contact_button.png);
display:block;
margin-left:399px;
position:absolute;
width:133px;
height:62px;
z-index:2;
}
a.contactButton:hover {
background-image: url(images/contact_button.png);
background-position: -133px 0;

}
a.contactButton:active, .active {
background-image: url(images/contact_button.png);
background-position: -266px 0;

}
p {
font: 0.7em Arial, Helvetica, sans-serif;
margin-left:30px;
}
#main p {
width:65%;
}

thanks again for your time , and sorry for taking up so much of it !!

Rakuli · #16 (**permalink**) Feb 5th, 2008, 14:27

It all looks pretty good

slimboyfatz32 · #17 (**permalink**) Feb 5th, 2008, 14:45

thanks for all the advice !!!

JustinStudios · #18 (**permalink**) Feb 5th, 2008, 16:02

Just a side note.. Stay away from Absolute positioning unless its 100% necessary. Fluid layouts are much better.

slimboyfatz32 · #19 (**permalink**) Feb 5th, 2008, 16:07

Thanks for the advice , do you think my CSS code above looks fine ?? should i remove 'Absolute Positioning' from within my buttons ??

thanks

JustinStudios · #20 (**permalink**) Feb 5th, 2008, 16:19

send me a link of the page working live. That way I can see the graphics and things with no problems. I've done extremely complicated layouts and never used position or z-index. So I know that these can be taken out. Also, I've never ever seen a need to hack for IE. There's always a way to write 1 css that can work on both. Yes IE has bugs, but heck, there's ways around them.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
positioning - relative or absolute?	google	Web Page Design	13	Nov 8th, 2007 16:00
absolute positioning	micker	Flash & Multimedia Forum	1	May 21st, 2007 19:17
Trouble with absolute positioning	minerguy	Web Page Design	4	May 26th, 2006 04:35
Rollovers and absolute positioning	echo	Web Page Design	5	May 2nd, 2006 10:51
absolute bottom positioning in all browsers	stephenleefarmer	Web Page Design	5	Dec 6th, 2005 23:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
When is it ok to use Absolute Positioning ??