Stylesheets - div at top not expanding with content

Author

div at top not expanding with content

Patrick Smith

2007-03-06, 6:22 pm

Hi All,

Working on a new design for our site trying to incorporate fluid design,
etc.

Ran into a situation that is befuddling me.

In this instance <http://ocgweb.marine.usf.edu/~patri.../testwidth.html>

The top banner divs expand when the browser is resized, but when the
scroll bar is moved when the browser window is smaller the top doesn't
expand. We do have contour plot images that may be 900px or more wide
and it just doesn't look right when top doesn't move with the scroll
bars. Any idea how to fix this? I have tried a number of ways but am at
the point of needing help from those more experienced than myself.

Thanks,
Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group – USF - college of Marine Science
http://ocgweb.marine.usf.edu Phone: 727 553-3334

The trouble with doing something right the first time is that nobody
appreciates how difficult it was. - La Rochefoucauld

John Hosking

2007-03-06, 6:22 pm

Patrick Smith wrote:

> In this instance <http://ocgweb.marine.usf.edu/~patri.../testwidth.html>
>
> The top banner divs expand when the browser is resized, but when the
> scroll bar is moved when the browser window is smaller the top doesn't
> expand.

Try wrapping it all up in a container div.

You've got your div#topwrap set to width:100%, and that's what you get;
no matter how you resize the window, your top header changes to be 100%
of the viewport's width (even if it's partially off the screen to the
left). You get what you asked for.

What you *want* is that div#topwrap is 100% of the *content's width*,
even when it overflows the viewport. The browser provides a scrollbar
when the images and menu are wider than the viewport's current size, but
div#topwrap doesn't know how big it's supposed to be, because it's an
unrelated sibling to div#contentwrap (and #menubar and #footer). It
seems as though body (the parent apparent) would handle this for us, but
it doesn't. We need a div (or other parent element) for div#topwrap to
be 100% of, which also knows how wide to be for #contentwrap.

If you are lucky, Jukka or Ben C or somebody will come in here with a
better (i.e., more technically accurate) explanation. If I am lucky, I
will even understand their explanation when they provide it.

HTH
--
John

Holy Batman!

2007-03-06, 6:22 pm

On Tue, 06 Mar 2007 10:42:00 -0500, Patrick Smith
<psmith@marine.usf.edu> wrote:

<snip>

>In this instance <http://ocgweb.marine.usf.edu/~patri.../testwidth.html>
>
>The top banner divs expand when the browser is resized, but when the
>scroll bar is moved when the browser window is smaller the top doesn't
>expand.
<snip>

I've never encountered this horizontal scrolling issue before which
either says something about my experience, or my design preferences
(or both) but...

a quick (marginally dirty) fix would be to wrap the header with a
couple containers. One div that has a large width specified (say
200%) that has the background. Another inside that, which will set at
50% (or size that corresponds to make 100% when multiplied against the
above 200%). I think this might work.

Let me know if it tests out ok.

Having written that, I hope that someone else will chime in with the
elegant solution.
-

Holy Batman!

2007-03-06, 6:22 pm

On Tue, 06 Mar 2007 18:49:19 GMT, Holy Batman! <reply@thegroups.thx>
wrote:

>On Tue, 06 Mar 2007 10:42:00 -0500, Patrick Smith
><psmith@marine.usf.edu> wrote:
>
>
>a quick (marginally dirty) fix would be to wrap the header with a
>couple containers. One div that has a large width specified (say
>200%) that has the background. Another inside that, which will set at
>50% (or size that corresponds to make 100% when multiplied against the
>above 200%). I think this might work.

I wrote this assuming that your issue was that the background didn't
expand on the right hand side of the banner/masthead area when the
content below pushed the width out to such an extent that horizontal
scrollbars appeared.

I just saw the other response and wasn't sure if I misunderstood.

Ben C

2007-03-06, 6:22 pm

On 2007-03-06, John Hosking <John@DELETE.Hosking.name.INVALID> wrote:
> Patrick Smith wrote:
>
>
> Try wrapping it all up in a container div.

Unfortunately not just any container div. You need one with a
shrink-to-fit auto width.

> You've got your div#topwrap set to width:100%, and that's what you get;
> no matter how you resize the window, your top header changes to be 100%
> of the viewport's width (even if it's partially off the screen to the
> left). You get what you asked for.
>
> What you *want* is that div#topwrap is 100% of the *content's width*,
> even when it overflows the viewport.

Yes, and this is the problem. Usually an element's auto width is a
function of containing width-- i.e. the space made available to it by
its parent, or by the viewport if it has no parent.

In other words, the browser works out the width of an element before it
even looks at its descendents (and its height generally after formatting
its descendents).

But for an element whose auto width is "shrink to fit" (floats, table
cells and inline blocks), the browser does use the contents to determine
the width of the element.

So the first thing is to add body { display: table-cell; }, or body {
float: left; }. Either should work. This should make the body at least
as wide as the content minwidth of its descendents, regardless of how
narrow the viewport is.

At this point the body is auto-width, and percentages of an auto-width
container are no good. They ought to be ignored, but YMMV. So compromise
and make #contentleft width: 14em (say) instead of width: 25%. Remove
float: right from #contentright and give it margin-left: 14em instead. We
need #contentright to have an auto-width because it's an ancestor of the
huge image.

If you really want #contentleft to be 25% of the viewport, rather than
of the body, you could make it absolutely positioned.

Spartanicus

2007-03-06, 6:22 pm

Patrick Smith <psmith@marine.usf.edu> wrote:

>In this instance <http://ocgweb.marine.usf.edu/~patri.../testwidth.html>
>
>The top banner divs expand when the browser is resized, but when the
>scroll bar is moved when the browser window is smaller the top doesn't
>expand. We do have contour plot images that may be 900px or more wide
>and it just doesn't look right when top doesn't move with the scroll
>bars.

The behaviour you are seeing is a good thing. There is no point in
pushing other content outside of the viewport just because one image
doesn't fit. A user may well only casually browse such pages and not
scroll to see the full image.

But you have more important issues to solve. The document contains not a
single header, the non decorative images have no alt content, and images
that contain text that is to small to be readable even on a low
resolution 85DPI screen.

--
Spartanicus

Dudely

2007-03-08, 10:16 pm

I'm totally out of my league here, and to be honest I don't understand
what it is you're trying to do, but what works for me is to set the
body width to 100% and to not designate a width for anything else. I
don't know if that's what you want, but what it does for me is that
images too big for the viewport get resized to fit, so that there is
no scrollbar at all. That's the effect I want.

In my case I had a 900 px image that was too large to fit on my
screen, and scroll bars appeared just to accommodate that image.
Everything else fit in under 780px. The above resized it to fit my
screen so that everything worked out nicely. No matter how much
resizing of my browser I do, all of my contents resize to fit so that
there are no scrollbars.

Now, from what I understand, I don't think a body width is supported
by the standards, so the proper way to do it may be to wrap everything
inside of a <div> and set the width there. Like I say, I'm out of my
league but it may work. If I understand John Hosking's post
correctly, he's essentially saying the same thing, but since I'm not
sure I understand him, I thought I'd tell you what seems to work for
me. The other posts just kind of made my head spin so, if what
they've got to say works for you, great! What the heck is an
"unrelated sibling" anyway? I guess I could ask my unrelated
brother. :)

On Mar 6, 7:42 am, Patrick Smith <psm...@marine.usf.edu> wrote:
> Hi All,
>
> Working on a new design for our site trying to incorporate fluid design,
> etc.
>
> Ran into a situation that is befuddling me.
>
> In this instance <http://ocgweb.marine.usf.edu/~patri.../testwidth.html>
>
> The top banner divs expand when the browser is resized, but when the
> scroll bar is moved when the browser window is smaller the top doesn't
> expand. We do have contour plot images that may be 900px or more wide
> and it just doesn't look right when top doesn't move with the scroll
> bars. Any idea how to fix this? I have tried a number of ways but am at
> the point of needing help from those more experienced than myself.
>
> Thanks,
> Patrick
>
> --
> Patrick A. Smith Assistant System Administrator
> Ocean Circulation Group - USF - college of Marine Sciencehttp://ocgweb.marine.usf.edu Phone: 727 553-3334
>
> The trouble with doing something right the first time is that nobody
> appreciates how difficult it was. - La Rochefoucauld

John Hosking

2007-03-08, 10:16 pm

Dudely wrote:

> Now, from what I understand, I don't think a body width is supported
> by the standards, so the proper way to do it may be to wrap everything
> inside of a <div> and set the width there. Like I say, I'm out of my
> league but it may work. If I understand John Hosking's post
> correctly, he's essentially saying the same thing, but since I'm not
> sure I understand him, I thought I'd tell you what seems to work for
> me. The other posts just kind of made my head spin so, if what
> they've got to say works for you, great! What the heck is an
> "unrelated sibling" anyway? I guess I could ask my unrelated
> brother. :)

Well, there you go reading for comprehension again, when it's clear I
was writing for speed! You should know better.

I can clarify what I meant, because I've just consulted with my sister
(no relation). :-)

I stand by the "sibling" part, because that's what the elements were:
siblings of each other.

I think when I wrote "unrelated", I meant (a) non-descendent (duh,
they're *siblings*!) and also (b) that they had no effect on each
other's width through some positioning juxtaposition (i.e., they weren't
next to each other fighting over browser width they had to share). (And
I apologize already for having posted "positioning juxtaposition" to usenet.

That's my story and I'm sticking with it.

Oh, and: In future, please don't top-post Type your contributions
following the points you want to reply to, and trim the rest. You
included the whole text below, and didn't trim anything (although I've
left some and trimmed some just for illustration purposes).

> On Mar 6, 7:42 am, Patrick Smith <psm...@marine.usf.edu> wrote:
>

Also, I understand GoogleGroups doesn't do this automatically (like many
newsreaders do), but it'd be great if you'd trim sigs, too. Everything
below is unnecessary for your reply.
[color=darkred]

Including this! Cheers,
--
John

Ben C

2007-03-09, 6:17 pm

On 2007-03-08, Dudely <ab3331@XXXXXXXXXX> wrote:
> I'm totally out of my league here, and to be honest I don't understand
> what it is you're trying to do, but what works for me is to set the
> body width to 100% and to not designate a width for anything else. I
> don't know if that's what you want, but what it does for me is that
> images too big for the viewport get resized to fit, so that there is
> no scrollbar at all. That's the effect I want.

That's very odd behaviour. What should happen in that case is that the
image overflows body and you get a horizontal scrollbar. What browser
were you using?

> In my case I had a 900 px image that was too large to fit on my
> screen, and scroll bars appeared just to accommodate that image.
> Everything else fit in under 780px. The above resized it to fit my
> screen so that everything worked out nicely. No matter how much
> resizing of my browser I do, all of my contents resize to fit so that
> there are no scrollbars.
>
> Now, from what I understand, I don't think a body width is supported
> by the standards, so the proper way to do it may be to wrap everything
> inside of a <div> and set the width there.

Even that should make no difference-- you should get the image
overflowing the container, not resizing to fit into it.