PDA

View Full Version : Problems Positioning DIVs

iGeek
12-21-2006, 01:19 AM
Now, before I go through all the percentage stuff, why doesn't this work?

I have a main DIV with the background set to an image. I have a DIV inside that DIV called "menu" and am trying to move this menu DIV so it rests over the area which I made for my menu in the background image of the first DIV. However it is messed up. So I'm wondering: When I absolute position something does it measure from the edge of the window or the DIV it is in?


#site
{ width:780;
height:500;
background-image:url(layout.jpg);
background-position:top left;
background-repeat:no-repeat;
}

#menu
{ position:absolute;
top:50px;
left:0px;
width:150px;
height:450;
}



<html>
<head>
<title>Phreak Your Geek</title>
<link HREF="pyg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="site">
<div id="menu">
Menu
</div>
</div>
</body>
</html>


Any help in appreciated!
iGeek
12-21-2006, 02:20 AM
Nevermind, I forgot to use relative instead of absolute.

This is weird...

Here is how my site is set up:


SITE DIV
MENU DIV
CLOSE MENU DIV

CONTENT DIV
CLOSE CONTENT DIV
CLOSE SITE DIV


The Menu div has a relative position of 50 from the top of the Site div. However, when I have the Content div also set to a relative position of 50 from the top and 151 from the left side of the Content div. But the Content div moves out of the Site div and poitions itself below it. This happens to the div that is last in my HTML code. So if I put the Menu div last, the Content div is perfect while the Menu goes down below the Site div. I'm sorry if this is confusing.

Here are the pages:

http://pyg.tgohome.com/cssproblem/
http://pyg.tgohome.com/cssproblem/index2.html
J to the izzosh
12-21-2006, 04:17 AM
Welp, given that you're using relative positioning, everything's displaying as it should. Relative positioning is applied after the element's place in the normal flow of things has been determined. It is then shifted relative to that normal position but does not affect the positioning of the surrounding content, which behaves as if the element has not been moved. Because divs are block-level elements, they are automatically preceded and followed by line breaks. That is why the divs appear in the order that's in the source and not on the same line; that is the way they would normally flow. To place an element out of the normal flow, you will need to float it or use absolute positioning.

To answer your original question: absolutely positioned elements will be positioned relative to the edges of the viewing pane unless a parent element is absolutely positioned. In that case, it will be positioned relative to the inside edges of the parent element. Using your document as an example, div#menu will be absolutely positioned relative to div#site if div#site itself is absolutely positioned, and relative to the viewing pane if div#site is not. Going by the CSS in your first post, div#menu will be positioned relative to the viewing pane.

Also, you should specify units for all of your measurements, Steve-o. ;)

And the proper comment syntax for CSS is to delimit your comments like so:
/* Gee, Ma, I done made me a comment! */
Don't use HTML in CSS; it isn't CSS. :stickout:
iGeek
12-21-2006, 05:59 AM
Where did I do that?

So what you are saying is if I float the content div, it will break the flow and go where I want it, right?
iGeek
12-21-2006, 06:06 AM
Alright, thanks Josh! It works!