Skip to content
View in the app

A better way to browse. Learn more.

Tip.It Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

CSS Positioning Cross Browser

Featured Replies

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]

websample.jpg

[/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).

sigcp.png

 

65,280 to 99 fletching on 3-14-09

40,405 to 99 woodcutting on 10-17-2009

  • 2 weeks later...

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;
   }

Best regards,

Nico

  • 2 weeks later...

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?

  • Author

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.

sigcp.png

 

65,280 to 99 fletching on 3-14-09

40,405 to 99 woodcutting on 10-17-2009

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.

Create an account or sign in to comment

Important Information

By using this site, you agree to our Terms of Use.

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.