-4

Possible Duplicate:
Center contents of webpage

I have a webpage that is 1640px wide, the main content is centered in the page and is 900px wide. I need to have the webpage center horizontally in the browser window no matter what the users screen or browser size is. Is this possible with javascript, jquery, or css? I dont have any real experience with java so could someone point me in the right direction or do they have a code sample? Thanks for the help!

here is a link to the page to help. Webpage link

the problem i might be having is becuase the header and footers are outside on my container and run the entire width of my webpage.

Community
  • 1
  • 1
John Marsh
  • 23
  • 2
  • 12

3 Answers3

0

The code looks like this:

#container { width: 1640px; margin: 0 auto; max-width: 100%; background-position: center 0;}
Adam Jenkins
  • 51,445
  • 11
  • 72
  • 100
0

You need to use a relative measurement - i.e 100% percents - and not a fixed number - i.e. 1680px. That way your wrapper will take the entire width of that specific screen no-matter what the resolution is, and the content will be centered:

#wrapper {
   width:100%;
}
#content {
width:900px;
margin:0 auto;
}
Matanya
  • 6,233
  • 9
  • 47
  • 80
0

I found your problem... Your code is doing what you want it to do. You need to remove the css that says width:1680px; from your html,body

instead make it say: width:100%;

hope that helps!

JCBiggar
  • 2,477
  • 3
  • 20
  • 33
  • Awesome! You fixed the problem!!! Everybody thank you so much for all the input and different solutions! – John Marsh Dec 04 '12 at 17:40
  • One quick question if you look at my link again, as a change my screen settings and view the page my header and footer are not showing up when scrolling to the right? any ideas – John Marsh Dec 04 '12 at 18:18
  • I just looked at your `#container` div. You need to make it's width to be 100%. Then you have some inline styling on your `#footer-shadow` div that sets its width to 1040px. You need to set that at 100% as well. Glad I could be of help! – JCBiggar Dec 04 '12 at 20:33
  • if that doesnt fix it, then it might have to do with the tables in the footer. Instead of using tables to create columns. You can create divs, giving them a width of 33.33333% OR custom px, and making them float to the left. – JCBiggar Dec 04 '12 at 20:39
  • I removed the width from the table and it worked. thanks JCBiggar! – John Marsh Dec 05 '12 at 17:45