best method to position a div on a page

canadianjameson

07-11-2007, 02:06 PM

Hi,

It has come to my attention that I may in fact not be using the proper method for positioning all of my divs. I currently use margins to position everything... is this how I'm supposed to do it or is there a better way? I've just always done it like this.

the code below can be viewed in action here: www.enviromark.ca/head/

/* CSS Document */
* {
padding: 0;
margin: 0;
outline: 0;
}
* html #pageContainer {
height:100%;
}
* img {
border: 0
}
#pageContainer {
min-height: 100%;
}
.clear {
clear:both;
font-size:0;
line-height:0px;
}
#topText {
position: relative;
margin-top:75px;
margin-left: 75px;
}
#logoC {
margin-left: 175px
}
#bottomText {
margin-left: 75px;
margin-top: 67px
}
#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
#topBorder {
position: relative;
display: block;
margin-top:75px;
margin-left: 75px;
}
#contentarea {
position: relative;
margin-left: 155px;
margin-top: 27px;
margin-right: 150px;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Testing</title>

<link rel="stylesheet" href="css/main.css" type="text/css">
<script language="JavaScript" type="text/javascript" src="js/dynamic_content.js"></script>
<script language="JavaScript" type="text/javascript" src="js/nav_fade.js"></script>

</head>

<body onload="zxcInitImages('logoC','links_BW')">
<div id="pageContainer">
<div id="topText"><img src="images/logoButtons/top_text.gif"></div>
<div id="logoC">
<img src="images/logoButtons/info_C.gif" >
<img src="images/logoButtons/YPP_C.gif" >
<img src="images/logoButtons/social_C.gif" >
<img src="images/logoButtons/med_C.gif" >
<img src="images/logoButtons/legal_C.gif" >
<img src="images/logoButtons/J2K_C.gif" >
<img src="images/logoButtons/street_C.gif" >
</div>
<div id="bottomText"><img src="images/logoButtons/bottom_text.gif"></div>
<div id="links_BW">
<img src="images/logoButtons/info_BW.jpg" onclick="ajaxpage('YPP.htm', 'contentarea'); loadobjs('css/pages.css')">
<img src="images/logoButtons/YPP_BW.jpg" >
<img src="images/logoButtons/social_BW.jpg" >
<img src="images/logoButtons/med_BW.jpg" >
<img src="images/logoButtons/legal_BW.jpg" >
<img src="images/logoButtons/J2K_BW.jpg" >
<img src="images/logoButtons/street_BW.jpg" >

</div>
<div class="clear"></div>
<div id="contentarea"></div>
</div>
</body>
</html>

edit: Also feel free to comment on any other aspects of the coding, as this is a learning process :D

canadianjameson

07-12-2007, 02:09 PM

alright, I guess i'll continue doing this then... I don't know why Vic keeps getting annoyed with me for using margins.

ahallicks

07-12-2007, 04:53 PM

Just remember that in IE6 sometimes the left margin doubles on a left-floated element! Something to be wary of when using margins.

canadianjameson

07-12-2007, 06:38 PM

I shall keep that in mind :D

I guess my question was 'is there any other way to do this?'

_Aerospace_Eng_

07-12-2007, 10:01 PM

alright, I guess i'll continue doing this then... I don't know why Vic keeps getting annoyed with me for using margins.

I'm guessing because Javascript doesn't work with margins to well when it comes to calculating certain things.

As to your code I would still use a list for your menus but you don't seem to listen so I won't bother telling you anymore.

canadianjameson

07-12-2007, 11:15 PM

actually I tried it and had problems with it, so i went back for now because i had a deadline for presenting the layout (yesterday).

I had another look at the situation in which you wanted me to remove the div and use the list... I need the 'id' of a container for a script to work, but i suppose i could add that to the <ul>... it just seems like adding more code for nothing.

What's generally better, semantically correct or more code?

ahallicks

07-13-2007, 10:58 AM

Semantically correct... although when you get to building huge pages I don't think you're going to worry as much. It's simply good practise to code semantically. It's like checking your blind spot on a car, not many people do it... but it should be done because it's the right thing to do (and can save lives).

canadianjameson

07-13-2007, 06:50 PM

I tried to change it to a list and it broke the script. I'll play around with it a bit later and get it semantically correct, but I have taken that in mind when doing further updates

koyama

07-13-2007, 08:45 PM

Also feel free to comment on any other aspects of the coding, as this is a learning process :D
You cannot simultaneously absolutely position and float an element [1]. More correctly stated, when you do so the floating is ignored.

You have this:

#links_BW {
float: left;
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
which is equivalent to this:

#links_BW {
position: absolute;
display: block;
margin-left: 75px;
margin-top: 25px;
width: 70px;
}
[1] http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

canadianjameson

07-13-2007, 08:53 PM

Thank you for the link, I have bookmarked it and will read it in dept on Monday (i'm packing right now -- weekend shenanigans here I come!)

I did remove, one at a time, the positioning and the float, and both caused the div to shift in different ways (one down, one to the left)... so it obviously isnt being ignored... what is happening?