someone help please? positioning issue

[crashfirephoenix]

Hiiiiiii I really hope someone can help me with this because I have been trying to figure it out and it's really frustrating me >.<

I am building a website (first time using CSS - I'm a n00b) and it seems that on some computers with a smaller resolution it looks fine but on computers like mine (screen resolution 1680x1050) there is a lot of white space on the bottom and on the right side? I am trying to position everything to the center...but it seems that the center is different for each computer? >.<

thanks in advance =\

body {
margin: 0px auto;
padding: 0;
text-align: center;
top: 0;
}
#pos
{
top: 0;
}
#container {
 width: 1024px;
height: 1114px;
left:0px;
top:0px;
display: block;
margin-left: auto;
margin-right: auto;
}
#bodytext {
 height: auto;
 width: auto;
 left: 25px;
 bottom: 500px;
}
#search {
 height: auto;
 width: auto;
 left:470px;
 bottom: 1010px;
}
#date {
 height: auto;
 width: auto;
 left:200px;
 bottom: 960px;
}
img
{
vertical-align: top;
}
p.sans {font-family: sans-serif}
#table
{
table-layout:automatic
}

[Milamber]

well first off you've got a lot of redundant code

body {
margin: 0px auto;
padding: 0;
text-align: center;
top: 0;
}

#pos
{
top: 0;
}

#container {
width: 1024px;
/* normally you don't want to set a max heigh for your container and 1114px is a really odd number if you do */
height: 1114px;
left:0px;
top:0px;
display: block;
margin-left: auto;
margin-right: auto;
margin: auto;
}

#bodytext {
height: auto;
width: auto;
left: 25px;
/* this is saying start the body text 500px from the bottom of the page, you're probably better of designating how far from the top you want it */
bottom: 500px;
}

#search {
height: auto;
width: auto;
left:470px;
/* again, probably want to define from the top */
bottom: 1010px;
}

#date {
height: auto;
width: auto;
left:200px;
bottom: 960px;
}

img
{
vertical-align: top;
}

p.sans {font-family: sans-serif}
#table
{
table-layout:automatic
}

[crashfirephoenix]

i fixed the code a bit to get rid of the redundency but theres still a lot of whitespace. any other suggestions as to what the problem could be? =\

[Milamber]

try changing body and #container to the following:

body {
padding: 0;
}

#container {
position:relative;
width: 1024px;
margin: 0 auto;
}

[added]
really the only way you'll get rid of the white space at the bottom is by adding content to your pages
[/added]

[edited by: Milamber at 8:05 pm (utc) on June 18, 2007]

[crashfirephoenix]

when i make the container have a position: relative..an image i use inside the container disappears lol..

and yeah..I tried everything you said but its still not gone -.- adding content doesn't get rid of the whitespace btw - it just makes it worse. ughhhhh lol

thanks everyone for your help so far but..any other suggestions? >.<

body {
padding: 0;
margin: 0px auto;
text-align: center;
}
#container {
width: 1024px;
margin: auto;
}
#bodytext {
left: 25px;
top: -950px;
}
#search {
left:470px;
top: -1010px;
}
#date {
left:200px;
top: -960px;
}
img
{
vertical-align: top;
}
p.sans {font-family: sans-serif}
#table
{
table-layout:automatic
}

[Milamber]

when you change the container to position:relative all the absolute positioned items inside it position themselves absoultely relative to the boundaries of the container which is probably why your image appears to have disappeared.

[edited by: Milamber at 8:17 pm (utc) on June 18, 2007]

[crashfirephoenix]

still not working =\

[300m]

I am not very good with css, but yesterday I ran in to something similar and I had success by changing the margin from auto to a numeric pixel. I do not know if that would help or not, but it fixed the issues I was having yesterday. Good luck :¦

[SuzyUK]

crashfirephoenix, Welcome to WebmasterWorld!

initial reaction to your CSS in OP.. far too much unnecessary positioning is being used!

left/right/bottom/top properties will only work/do anything if the element they are applied to is positioned: relative, absolute or fixed {fixed does not work in IE6 and below anyway..)

viewport 'center' is the same for all browsers, however how you find that center is going to dictate how it works across resolutions. You have to ignore whatever resolution you are looking at your page in, and DO NOT base any heights, widths, left, top, bottom, right positions on a specific resolution, i.e. do not use pixels to find the center!

<body> is not a reliable element to center yet so it is still recommended you center a "container/wrapper" div inside the body..

simply put to find the center.. the ingredients are simple

body {margin: 0; padding: 0; text-align: center;}
#container {width: 600px; background: #eee; margin: 0 auto; text-align: left;}

<body>
<div id="container">this container div should be horizontally centered no matter the screen resolution</div>
</body>

if you then want the container to become a "containing block" for other positioned elements you then need to make it "position: relative;" - no co-ordinates are necessary - if you want to move the container from the top of the page then use

margin-top

I can't see how the rest of your page lays out, but as Mmilamber pointed out you seem to have a whole ream of unnecessary code, e.g.

#pos {
top: 0;
}

the above does nothing unless #pos has position: relative or position: absolute; attached and even if it did it still does nothing if it's position relative as the natural top for a div is 0. and if it's absolutely positioned it will then sit on top/underneath other stuff

I think we would need to see the corresponding HTML layout, stripped to just the layout - content/specifics not necessary - in order to get more specific about why it's not working. I've a feeling that you are trying to "stick" things in place using layers/positioned divs, if so it's going to be very difficult to make it look the same x-browser.. you need to relax and let the content flow with very little explicit dimensions use margins and/or padding to add space ;)

Suzy

[Xapti]

Well put, I would have said the same things :P.

crashfirephoenix,
here's some really useful pages which will be great reference, and useful for learning CSS and layout in HTML:
[w3.org...]
[w3.org...]
[w3.org...]
There's more like this on other topics if you hit NEXT or PREVIOUS on the top of the pages.

There are a whole bunch of tutorial sites too you can find via google or something, if you find those pages too complicated.

[edited by: Xapti at 7:19 pm (utc) on June 19, 2007]