I have been positioning divs within my layout using a method like below:

<div id="wrapper">
<div id="header-logo"></div>
<div id="header-navigation"></div>
<div id="header-social-media-icons"></div>
</div>

and my css looks like this:

#wrapper{
position: relative;
}

#header-logo {
position: absolute;
left: 20px;
top: 20px;
}

#header-navigation {
position: absolute;
left: 200px;
top: 20px;
}

This seems to work very well for me...my question is, how reliable is this method outside of Firefox/Safari? Does it work well with Internet Explorer? Are there times when I should definitely not try this method for placing my larger divs?

3 answers

0
points

Most of the time absolute positioning works quite well. Check out IERender for IE tests.

I personally prefer position:relative as it works better for different size browser windows and allows for different style layouts depending on the window size.

Answered over 5 years ago by Simon Prochazka
Ceez 0
0
points

The best answer I can give you, is to test it. Cross browser testing is a good way to learn. Although it may look similar in most browsers a conditional style sheet is the best way to tell the browsers exactly what to do.

Answered over 5 years ago by Ceez
0
points

This website: http://browsershots.org checks your url look on different browser. Highly recommend to test on all popular browsers before making it live.

Answered over 5 years ago by rias123