Weird window scaling issue

[brianatlarge]

So I’ve got this page: http://stuckpixelstudio.com/sandbox/troubleshooting/example.html.

For some reason when you scale the browser window down, weird things start happening. I’m pretty sure it’s because I don’t completely understand relative positioning, because up until now I’ve been using absolute positioning. I just can’t figure out why this is happening.

If you’ll notice, the top green bar behaves the way I would like for the rest of the page to behave, where when it reaches the left side it stops and the right side gets covered up by the rest of the window, however, the rest of my content does not behave this way.

I also have a LOT of white space that shows up at the bottom. Not sure why that is either.

Also, I can’t figure out for the life of me how to get the "Showing 1-10 of 20" to be on the left side, and the "Sort by" to be on the right side and still look right. Any time I’ve made this happen, the Sort by looks like it’s trying to be on a new line.

Here’s my HTML:

Code:

Showing 1-10 of 20
Sort By: Restaurant: A to ZRestaurant: Z to ADiscountKindDistance

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

And here’s my CSS:

Code:

body
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;
}

.everything
{
background:url(images/bg.jpg);
background-position: center top;
background-repeat:repeat-y;
margin:-8px auto;
}

.searchbox
{
background:url(images/topgreen.jpg);
background-repeat:no-repeat;
height:30px;
width:999px;
text-align:right;
padding: 3px 50px 0px 0px;
background-position: center top;
margin:0px auto;
}

.logobox
{
background:url(#);
position:relative;
left:-370px;
width:175px;
min-height:135px;
background-position: center top;
margin:0px auto;

}

.adbanner
{
position:relative;
top:-120px;
left:95px;
min-height:90px;
width:730px;
background-position: center top;
margin:0px auto;

}

.adbox
{
position:relative;
top:-90px;
left:300px;
min-height:240px;
width:300px;
background-position: center top;
margin:0px auto;

}

.contentbox
{
position:relative;
left:-165px;
top:-340px;
width:560px;
min-height:100px;
padding: 5px;

background-position: left top;
margin:0px auto;

}

.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}

.refine
{
background-color:#eeeeee;
position:relative;
top:-100px;
left:0px;
text-align:right;
min-height:25px;
width:890px;
padding:5px;
background-position: center top;
margin:0px auto;
}

.resultnumber
{text-align:right}

Thanks guys.

[Author]

Posts