Fitting to Window

[Steve25]

I've been playing around with another design that has a header with is 100% width and a couple of quick content boxes to the left and right of the page. The thing is i'm using 1280x1024 and while they look fine on that as soon as you move to any other resolution either the header looks wrong or the right content box is off over to the right too much.

I looked on amazon and noticed that whatever resolution to have the content boxes seems to be in the same position and the website looks no different. I'm sure there's a way to have the header 100% on all resolutions and have the content box positioned the same. I've tried using % but i don't think that's the answer.

So how do you do this? I've tried looking online but didn't seem to find much. I was thinking of loading multiple style sheets using javascript but the user could have javascript turned off.

[Fang]

Amazon don't have a header, just 3 columns with the center column elastic.

What is the content of your header?

[Steve25]

Sorry for the late reply.

I'm not sure what you mean exactly. The weird thing is, firefox doesn't seem to want to scroll down but IE does. What i mean by that is, when there is content below what is visible in the window you can't scroll down for some reason.

Also, after setting width to 100% in different resolutions when you scroll to the left there's like a gap which i found odd. Content that is on the right is thrown off too far to the right and i'm not sure how to fix this

[Fang]

Probably an overflow:hidden placed incorrectly.

[Steve25]

I've used it in the body of the document. I think the reason it stretches is because i have something that is done by pixels which is more than the resolution. Don't know if this will help but here is my css:


body {
overflow: hidden;
margin: 0;
padding: 0;
}

a {
color: #EEEEEE;
text-decoration: none;
}

#top {
background: #472509;
height: 35px;
position: relative;
}

#top-div {
height: 20px;
left: 80%;
position: relative;
top: 10px;
width: 250px;
}

#banner {
position: relative;
width: 100%;
height: 100px;
top: 0px;
background: #6a4629;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
}

#banner-div {
position: relative;
width: 150px;
height: 50px;
left: 200px;
top: 35px;
}

#bar {
position: relative;
width: 100%;
height: 30px;
background: #472509;
overflow: hidden;
}

#home-div {
position: relative;
width: 70px;
height: 30px;
left: 200px;
top: 0px;
background: #8e6544;
border-left: 1px solid #555555;
border-right: 1px solid #555555;
}

#about-div {
position: relative;
width: 70px;
height: 30px;
left: 272px;
top: -30px;
border-right: 1px solid #555555;
}

#shop-div {
position: relative;
width: 70px;
height: 30px;
left: 344px;
top: -60px;
border-right: 1px solid #555555;
}

#delivery-div {
position: relative;
width: 80px;
height: 30px;
left: 418px;
top: -90px;
border-right: 1px solid #555555;
}

#contact-div {
position: relative;
width: 80px;
height: 30px;
left: 500px;
top: -120px;
border-right: 1px solid #555555;
}

#main {
position: relative;
width: 100%;
height: 561px;
overflow: hidden;
}

#search {
position: relative;
width: 250px;
height: 100px;
left: 50px;
top: 50px;
}

#welcome-main {
position: relative;
width: 500px;
height: 200px;
left: 380px;
top: -50px;
}

#information {
position: relative;
width: 250px;
height: 300px;
left: 980px;
top: -250px;
}

#bottom {
position: relative;
width: 100%;
height: 50px;
top: 90px;
background: #111111;
border-top: 3px solid #777777;
overflow: hidden;
margin: 0;
padding: 0;
}

p.top-text {
margin: 0;
padding: 0;
color: #EEEEEE;
font-size: 9pt;
font-family: "Arial";
}

p.banner-text {
color: #000000;
font-size: 22pt;
font-family: "Arial";
padding: 0;
margin: 0;
}

p.main-text {
color: #000000;
font-size: 10pt;
font-family: "Arial";
padding: 0;
margin: 0;
}

p.nav-text {
color: #DDDDDD;
font-size: 10pt;
font-family: "Arial";
font-weight: bold;
text-align: center;
padding: 0;
margin: 0;
}

span.top-span {
word-spacing: 6px;
}

span.banner {
color: #EEEEEE;
}

.nav-text-pos {
position: relative;
width: 50px;
height: 18px;
left: 10px;
top: 6px;
}

h1.side-head {
color: #000000;
font-size: 16pt;
font-family: "Arial";
padding: 0;
margin: 0;
}

h1.main-head {
color: #777777;
font-size: 16pt;
font-family: "Arial";
padding: 0;
margin: 0;
}

[Fang]

It's the overflow in the body.
Your layout is done using relative positioning, the use of margins would cause lass problems.

[Steve25]

Ah brilliant now it is back to normal, thanks :).

Now i have the positioning to fix. I really should understand how this stuff works in detail before using it, my mistake. You mentioend using margins, but you can't place content inside margins can you? And if you did would it not be huge?

[Fang]

All elements can have a margin, it's size depends on the values you give it.
http://www.w3.org/TR/REC-CSS1/#formatting-model

[Steve25]

Fang, thanks for the link it looks very useful i'll have a look through those.

What i was wondering though, even if you used a margin would it not still have the same kind of effect? I mean if you've got a div that's say 900px over to the right? Surely having a margin that covers that amount of space is still going to course the same problem.

I noticed on amazon's website that the center area seemed to looks the same on different resolutions whereas mine appears bigger/smaller. I mentioned that site because that's pretty much what i'm trying to do on mine. The right side will always go too much over to the right it seems

[Fang]

Position relative leaves 'empty' spaces in the document flow, with margins the elements remain in the flow.
A common question asked here is "I have a huge empty space at the bottom of the document. Where does this come from?"
From the accumulated use of position relative!

Afaik Amazon use a fixed width for the left column and a right column that expands to fill the screen, probably with a max-width, with a min-width set to prevent overlapping.

[Steve25]

Ok that seems to make sense. So do you think that it's not a good idea to ever use relative positioning or is it just not much good in this case?

I didn't know you could put content in the margins unless i've got mistaken? I'll have to find out how to work with this. You said earlier that you can have a center column elastic or flexible, do you know anywhere i can read about this?