100% width div is not the full width

Problem with div width on horizontal scroll pages

[kapow]

I have a header div within a page div. I want the header bar 100% width of the page div. On 800x600 screen some pages require horizontal scrolling - the problem is I can't make the header div continue into the horizontal scrolling area on the right i.e. it stops at 100% of the visible screen, so when you scroll - the header background colour is not there.

If I do it with a table with 100% width it works fine - but I want to do this with CSS.

So - how do you set width to 100% on a div within a div even if there is horizontal scrolling.

Note: on this site I can't avoid horizontal scrolling on a small screen.

[DrDoc]

Let me guess, you have applied padding to the 100% div as well? In that case, it will be wider than 100% since
total_width = width + padding

I suggest creating a 100% DIV with margin and padding set to 0px. Then, inside that div, place the "real" DIV with the desired padding etc.

Another thing that might work (depending on the rest of your page) is not specifying a width at all, thus only needing a single DIV. It should automatically expand to be 100%, minus padding ...

[gph]

Also, add this

html, body {
margin: 0;
padding: 0;
}

It might not be necessary but it's a good way to insure that body and HTML aren't affecting anything.

[DrDoc]

Well, unless you want the page to have the default padding around it. 100% is then 100% of the window width, minus body padding.

It shouldn't affect anything .. but, you never know ;)

[grahamstewart]

I think you are mis-understanding him. I think he is saying that his main content is wider than the window (like a large image maybe?) and it disappears off the right-hand side so he'd like his header div to do likewise so that it doesn't appear to stop when you scroll the page

kapow: is your main content a fixed width? If so you could specify your header div width to be the same.

[DrDoc]

It's also important to keep in mind that sometimes 100% is in reference to the window, sometimes it's in the reference to the container.

So, when is it one or the other?

Well, if your page is 1000px wide, but your window is 800px wide - then 100% will be 800px. If the content of the div expands, the background still won't.

If your div resides inside another fixed width container, whose width is less than the width of the browser window - then 100% will only expand to the width of the outer div.

[kapow]

I don't think the problem is with margin or padding.
CSS already has: body {margin: 0; padding: 0; }

> I think he is saying that his main content is wider than the window... and it disappears off the right-hand side so he'd like his header div to do likewise so that it doesn't appear to stop when you scroll the page..

Yep, thats the problem.

> kapow: is your main content a fixed width?
Not quite. Below the header div is a table. The table is 100% width - it expands to fill the remaining screen (on a large screen), but the header div doesn't. The table has 4 columns, each column has a pic at the top 150px wide. The left nav is 225px wide (a div). The site is for an interior-designer so it has lots of pictures, and the designer really wants those 4 columns. I could re-design the whole thing but there are about 100 pages. I would really like to know if there is a nice simple thing I can do to my CSS-header-div without having to manually redo all of the pages.

> If the content of the div expands, the background still won't.
Are you saying this can't be done with divs?

[DrDoc]

> If the content of the div expands, the background still won't.
Are you saying this can't be done with divs?

No, that's not what I'm saying... Try not specifying a width at all. The div should expand to fill the page.

Does the problem occur only on smaller screens when there's horizontal scrolling, or all the time?

[grahamstewart]

Personally I think if he is already using tables for layout then don't fight it... just add a table row with a colspan of 4 and use that as the header.

There seems little point getting purist about using a div but leaving the existing layout as is.

[SuzyUK]

Doc it doesn't expand even if you put both table and div into a wrapper

which is why I tend to agree with grahamstewart on this one, although I wouldn't do it with a "colspan=4" row I'd do it with a caption as this is exactly what the caption to a table is for, giving it a heading:

example:
<table border="1" width="900px">
<caption id="header">headertext</caption>
<tr><td>cell l</td><td>cell 2</td><td>cell l</td><td>cell 2</td></tr>
<tr><td>cell l</td><td>cell 4</td><td>cell l</td><td>cell 2</td></tr>
</table>

then you can format the caption with CSS the same as it was in the div hopefully

Suzy

[grahamstewart]

Heres a simplified example thats demonstrates his problem (as I understand it)..

<div id="header" style="border: 1px dashed red">
 Header
</div>
<div id="content" style="border: 1px dashed green">
 <img width="2000" height="5" src="graphic.gif">
</div>

Place this on a page and view it. You should see that content div extends off the side of the window (if not you have a mighty big screen..make the window smaller) and causes a horizontal scrollbar to be displayed. Now if you scroll to the right you will see that the header div is only as wide as the window, not the full width of the content.

So the question is how do you specify the header so that it is as wide as the content?

[DrDoc]

it doesn't expand even if you put both table and div into a wrapper

It doesn't? :(

[kapow]

> So the question is how do you specify the header so that it is as wide as the content?

Yep, thats the question.

I can do this with tables but I have about a 100 to manually fix. Can I do something to my CSS to save several days of my life. :)

[grahamstewart]

The best I can come up with is to wrap the content with your header div so that the content forces the header div to expand. Like this..

<div id="header" style="border: 1px dashed red"> 
Header 
<div id="content" style="border: 1px dashed green"> 
<img width="2000" height="5" src="graphic.gif"> 
</div> 
</div> 

Works for my simplified example at least. Does that help?

If not then I suggest you download a decent text editor that supports regular expressions and multi-document search-replace (Textpad is good) and make your changes with that. At least that will save you "several days work". :)

[kapow]

Great idea grahamstewart
it almost works but:

The text in the header is white and the header background is a dark colour, the text in the content div is a dark colour and the background is a light colour. This is done with the CSS.

So if I wrap the header div around the content div the content div colours get messed up.
Also I have set the header to 150px high in the CSS with a 50px top margin, that wouldn't work if the content were inside the header.

I'm stuck arnt I :(
I think its major edit time. Any last suggestions?

I use DreamWeaver, it has great search and replace functions but all of the headers have different content ie each has an h1,h2 and h3 and a link.

[grahamstewart]

Okay thats a different problem, why do the content div colours get messed up? If it is inheriting any colours from the header then you can always change them by being more specific with your selector. e.g.

#header {
color: black;
background: white;
}
#header #content {
color: white;
background: black;
}

The top-margin;50px should still work fine, but do you really need to specify that height?

[SuzyUK]

Off the top off my head you could "fake it" by using background graphic on the body the same color as your header background set to repeat-x only

unless of course there's borders on the header because you'd still see the "cut-off" point

Suzy