8 replies [Last post]
orandov
Offline
newbie
Last seen: 14 years 44 weeks ago
Joined: 2008-01-25
Posts: 5
Points: 0

Hi,

Another width 100% question... but I looked at the how to forum and did some research and I am still confused.

All I have is a header on top and the content below. Each have there own background color which is missing when you scroll over to the right and all you see is white. If you resize the browser the color is extended. This also happens with the height but it is not as much white space. I am using IE7.

How do I get rid of the white space on scrolling?

body
{
}

#container, #form1
{
}

#header
{
background-color:#006699;
height:60px;
position:absolute;
left:0px;
top:0px;
width:100%;
z-index:2;
}

#content
{
background-color: #dcdcdc;
position: absolute;
left: 0px;
top: 60px;
width:100%;
height: 100%;
z-index: 1;
background-image: none;
}







Thanks for the help,
Oran

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 17 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

I think that when you

I think that when you absolutely position something, then %'s for width don't do anything

But you don't need 100% width anyway. By default, they will take up all available space (which is 100%), so you don't event need that.

Second, why are you using absolute positioning? Because all it looks like you're doing is moving the content down 60px which is the height of the header. This is unneeded, because div's will just come after the last element.

I think this white space when you scroll down thing is because you put height: 100% makes it the size of the entire page, but the header already took up some space, so it gets pushed down.

Try this CSS, it should do exactly what your CSS looks like it is supposed to do.

body {background-color: #dcdcdc;} #header { background-color:#006699; height:60px; }

#content
{
background-color: #dcdcdc;
}

orandov
Offline
newbie
Last seen: 14 years 44 weeks ago
Joined: 2008-01-25
Posts: 5
Points: 0

Thanks for the reply. "I

Thanks for the reply.

"I think that when you absolutely position something, then %'s for width don't do anything"

When I took away the width:100% the #header didn't extend to the end of the browser.

My task is to redo an ASP.net website from 1.1 to 2.0. The website was built with absolute postitioning and inline styles on everything. Since I am new to CSS and there are a lot of controls and info in the site I didn't want to get involved in changing the layout and postioning of the individual controls and content.

However, I thought I would take a stab at using CSS to design the layout of the different sections of the page (like the header, content, menu w/in the header) and anything new that I would add to the website.

When I used the CSS you suggested it jumbled up everything on the page. That is probably why I put it there in the first place. Maybe I am doing something wrong.

Putting the background color the sames as the #content tag is a good idea b/c that solves most of my problem. The only thing that doesn't work right is the header's color when you scroll to the right.

So this is what I have so far

body { background-color: #dcdcdc; }

#header
{
background-color:#006699;
height:60px;
position:absolute;
left:0px;
top:0px;
width:100%;
z-index:2;
}

#content
{
background-color: #dcdcdc;
position: absolute;
left: 0px;
top: 60px;
z-index: 1;
width:100%;

}

/*
body {background-color: #dcdcdc;}
#header{background-color:#006699;height:60px;}
#content{background-color: #dcdcdc;}
*/

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 40 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

That's the kind of thing

That's the kind of thing that happens when you rely on absolute position. You put yourself in the position of having to define everything exactly right, and it's easy to end up with a real mess.

Much better is to can the AP and rely mostly on the natural flow of elements produced by the default browser positioning. Get your html marked up validly and semantically, and if you don't understand what these things mean then look them up on the board here or with good old Google.

If you do that you'll end up saving yourself weeks of time and wasted effort. I speak as someone who has been down that path before you - that way lies madness.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

orandov
Offline
newbie
Last seen: 14 years 44 weeks ago
Joined: 2008-01-25
Posts: 5
Points: 0

Hi, I understand that

Hi,

I understand that absolute positioning causes problems and makes everything a mess, but I don't have the time right now to redo everything while learning how to position things with CSS. This website is mostly a data entry site with a lot controls (500+) and data to be displayed. Everything on the website has absolute postioning. This is one of the last issues that I have with the website and I have everything else working. I was hoping I could find a solution to this problem so I can wrap things up (management wants me to move on).

Thanks,
Oran

d41
d41's picture
Offline
Enthusiast
Last seen: 12 years 17 weeks ago
Timezone: GMT-7
Joined: 2007-07-07
Posts: 98
Points: 0

If you really must still use

If you really must still use absolute positioning, to get rid of the scrollbar, remove height:100% from the content.

I would really try to get rid of the absolute positioning. You're basically positioning everything how it would be in the normal flow. Try this CSS instead, it might work, because position:relative; makes it so that things can be positioned absolutely inside of it.:

body {background-color: #dcdcdc;}
#header{background-color:#006699;height:60px;position:relative;}
#content{background-color: #dcdcdc;position:relative;}

It would be helpful if we could get a link to this site, or the entire CSS+HTML

orandov
Offline
newbie
Last seen: 14 years 44 weeks ago
Joined: 2008-01-25
Posts: 5
Points: 0

I figured out (like you

I figured out (like you suggested) that I could get rid of the abs pos for the tags. But the #header still doesn't extend all the way when I scroll to the right.

Here is the css and the source (html) for the master page which has the #header and #content

body { background-color: #dcdcdc; width:100%; margin:0; padding:0; font-family:Tahoma; }

#header
{
background-color:#006699;
height:60px;
}

#content
{
background-color: #dcdcdc;
position:relative;
}

.title
{
position:relative;
top:5px;
}

.titlemenu
{
position:relative;
left:177px;
padding-left:10px;

}
.login
{
position:absolute;
left:300px;
top:40px;
}

.links
{

position:absolute;
left:230px;
top:39px;
}



Master Page












orandov
Offline
newbie
Last seen: 14 years 44 weeks ago
Joined: 2008-01-25
Posts: 5
Points: 0

I played around with the

I played around with the header some more to remove the abs pos. but the header still doesn't extend and I have another question.

If I leave the positioning alone everything will appear underneath each other. How do I get everything to be positioned horizontally?

So far what I did is make the position:relative and set the left and top properties and the top had to be negative to move it back up. Is there an easier way to do this?

Here is the latest code:

.logo { float:left; } .title { position:relative; top:5px; clear:right; }

.titlemenu
{
position:relative;
float:left;
top:-62px;
left:177px;
padding-left:10px;


}
.login
{
position:relative;
left:300px;
top:-40px;
}

.links
{
position:relative;
left:230px;
top:-20px;
}



Master Page









Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

When you scroll off the

When you scroll off the visible viewport you are not resizing the viewport, whatever was 100% width was 100% of the actual viewport, if you have something extending the page with a fixed width then it will cause this problem.

Looking at your code I see no DTD and a heap of non HTML elements, not great for validation!

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me