positioning, divs and resolutions

Vedder · 22 Mar 2007 at 22:23

I have a couple of questions in relation to positioning DIV's on a page. I have a layout set out fine and i want a nested div which is positioned within the main content, a little box if you will. I have managed to do this with position:absolute etc.. and it looks great maximised, however if you shrink the window the box moves around and generally makes the page look wrong. Is there a way of fixing this? Also some of the positiong goes to NO SWEARING if you dont use a certain resolution, which is really annoying me. Any help on this appreciated.

lozza · 22 Mar 2007 at 23:15

Position: Absolute means the box will stay in the same place no matter the size of the window - it's absoloutly positioned in that place.

Remove the position: absoloute.

With regard to the resolution - you should design your site for the resolution your viewers will be using. It's hard to comment more without seeing your site or your code/css

Vedder · 22 Mar 2007 at 23:16

So would you use anything other than position: or would you just set margins on the top, left, bottom etc?

Augmented · 22 Mar 2007 at 23:25

Harib0 said:
Position: Absolute means the box will stay in the same place no matter the size of the window - it's absoloutly positioned in that place.

That's not entirely accurate. Giving an element position: absolute means the box will be placed relative to the edges of the nearest 'positioned' ancestor. That is to say, if the containing box is 'positioned' then any position: absolute element within it will be placed relative to the edges of the containing box. The edge of the browser (the <body> element) is, by default, the nearest positioned ancestor so you need to override its effect.

So to make an element positioned without affecting its current placement, you can use the position: relative; property. As long as you don't supply any left/right properties it will gain the behaviour you want without moving (relatively positioned elements are placed relative to themselves) e.g.

Code:

#content {
[COLOR=Yellow]position: relative;[/COLOR]
width: 800px;
background-color: #ff0;}

#nested_div {
position: absolute;
left: 10px; // 10px from the left edge of #content
top: 150px; // 150px from the top edge of #content}