CSS Positioning Cross Browser

[GottaGetDownOnfriday]

So I am working on a basic website for general purposes.

 

Hereis the link to the website.

 

 

How would I position things or set it up to where my website looks the same on all browsers? I've tried relative and absolute positioning but things always get messed up.

 

[hide=reference picture]

[/hide]

What I want to do is divide my site into three areas: navigation bar(reference pic red area), advertisement bar(reference pic blue area), and main content area(reference pic green area).

[Clooth]

Something like this? http://labs.sig.ly/rand/layout.tipit.html

 

HTML:

  <div id="wrapper">
   <div id="header">navigation bar</div>
   <div id="content">
     Content
   </div>
   <div id="advertisement">
     advertisement
   </div>
 </div>

CSS:

   html, body {
     margin: 0;
     padding: 0;
   }
   body {
     text-align: center;
   }
   #wrapper {
     background-color: yellow;
     margin: 10px auto;
     position: relative;
     text-align: left;
     width: 760px;
   }
   #header {
     background-color: red;
     height: 100px;
     width: 760px;
   }
   #content {
     background-color: blue;
     width: 760px;
   }
   #advertisement {
     background-color: green;
     height: 480px;
     width: 200px;
     position: absolute;
     top: 100px;
     right: -200px;
   }

[Guest jrhairychest]

Sorry haven't time to look at it in great detail but you tried using tables and altering the width% rather than using CSS for the positioning?

[GottaGetDownOnfriday]

Sorry haven't time to look at it in great detail but you tried using tables and altering the width% rather than using CSS for the positioning?

 

 

I changed Clooth's suggestion to fit my needs and it works great. Thanks anyways.

[Guest jrhairychest]

I changed Clooth's suggestion to fit my needs and it works great. Thanks anyways.

 

No worries. Just be careful of using absolute positioning and fixed pixel widths/heights on your website as there's quite a degree of variation of user screen resolutions which brings quite a few problems. Thats why I use width% in tables to be sure it adjusts according to the resolution. Sorry I could be preaching to the converted here.