div at top not expanding with content

[Patrick Smith]

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/~patrick/New/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: [phone]

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

[John Hosking]

Patrick Smith wrote:

In this instance <http://ocgweb.marine.usf.edu/~patrick/New/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

[Ben C]

On 2007-03-06, John Hosking <Jo**@DELETE.Hosking.name.INVALIDwrote:

Patrick Smith wrote:

>In this instance <http://ocgweb.marine.usf.edu/~patrick/New/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.

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]

Patrick Smith <ps****@marine.usf.eduwrote:

>In this instance <http://ocgweb.marine.usf.edu/~patrick/New/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]

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 <divand 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 <[e-mail]:

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/~patrick/New/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: [phone]

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

[John Hosking]

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 <divand 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 <[e-mail]:

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.

>>Thanks,
Patrick

--
Patrick A. Smith Assistant System Administrator
Ocean Circulation Group - USF - College of Marine Sciencehttp://ocgweb.marine.usf.edu Phone: [phone]

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

Including this! Cheers,
--
John

[Ben C]

On 2007-03-08, Dudely <ab****@gmail.comwrote:

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 <divand set the width there.

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