Forum Moderators: not2easy

Message Too Old, No Replies

Absolute positioning and divs

         

namelessguy

3:37 pm on Jun 21, 2005 (gmt 0)

10+ Year Member



I've used aboluste positioning to place some divs in the top left, top center and top right.

Now all my other divs are appearing/layering on top of these divs. Is there anyway to stop this?

Sathallrin

3:53 pm on Jun 21, 2005 (gmt 0)

10+ Year Member



You could increase the z-index of the absolutly positioned divs so they are on top. Then you would have to add a padding div to the top (non absolutly positioned) to move your other content down if you wish.

faltered

5:57 pm on Jun 21, 2005 (gmt 0)

10+ Year Member



Absolutely positioning an element takes it out of the natural flow of the site. That's why you're having overlap. Try relative positioning or you could enclose everything in a container div and then absolutely position that.

SuzyUK

6:20 pm on Jun 21, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



namelessguy, positiong the divs absolutely takes them out of the document flow.. almost like they'd just been stuck on the page.. the divs/elements that follow these do not know the AP'd ones are there and will start themselves at the top of the page.

some solutions:, though it depends on your requirements what is best for you to use...

If your top three positioned divs are all of the same height just make sure to give the following div a top margin of the same height as your "top section" (or slightly more if you want a gap)

or use a container div around the top section, again set to the height required and postion it relatively then position the (3)internal divs according to it.

or position the longest div of your top section relatively, though it will need to remain in the correct order in the HTML flow, then position the other two absolutely as required..

options options :)

Suzy

(typing too slow! ~ faltered already said some of this ;))

namelessguy

10:25 am on Jun 22, 2005 (gmt 0)

10+ Year Member



Thanks guys.
Got it working now. :D