473,225 Members | 1,266 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,225 software developers and data experts.

positioning a scrolled DIV after fluid content?

Hi,

I have a div with fluid content, below which I want a scrollable div.
I can't work out how to style the scrollable div to say "use the rest
of the space in the container".

The best I can come up with is having the scrollable div abolutely
positioned as in my demo, but this is horrible as it doesn't follow
the fluid stuff.

Demo here:

http://www.thebunnyshed.co.uk/test.htm

Jun 5 '07 #1
1 1917
On 2007-06-05, lister <li************@hotmail.comwrote:
Hi,

I have a div with fluid content, below which I want a scrollable div.
I can't work out how to style the scrollable div to say "use the rest
of the space in the container".

The best I can come up with is having the scrollable div abolutely
positioned as in my demo, but this is horrible as it doesn't follow
the fluid stuff.
I can't see a way of doing it without resorting to a table (or obviously
JavaScript but in my opinion using JS for layout is worse than using
tables for layout).

If you don't mind setting the height of .container to something (rather
than setting bottom) then it's possible.

What you want is for the computed value of top for .container to be its
"static position" which means the position where it would have gone if
it hadn't been positioned, which is just under the <h1>.

That is possible if you set top to auto, but you also need to set bottom
to auto. Otherwise the computed value for top is based on bottom and the
height. If bottom is auto, you will need to set the height, or it will
be based on the content, which will be far too high.
Demo here:

http://www.thebunnyshed.co.uk/test.htm
Jun 5 '07 #2

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: Anna | last post by:
Hi all. I have a div with a scrollbar, which contains an image: <div style=" width:15em; height:10em; overflow:scroll;"> <img src="some.gif"/> </div> The image is rather small, it occupies...
9
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. ...
6
by: John Topley | last post by:
Hi, I'm trying to create a pure CSS layout using DIVs. I have three DIVs (in one column) down the left hand side of my page, with a ten pixel vertical gap between each of them (the content is on...
5
by: Neal | last post by:
Regarding the oft-discussed http://users.rcn.com/neal413 - after altering the stylesheet to accommodate a fluid design model, encountering odd behavior. HTML consists of a relatively-positioned...
22
by: Jam Pa | last post by:
Once again my big mouth has landed me with a tough job. I have a static CSS layout, where each and every element has been defined by pixel size - lots of them, too! Mostly relative elements,...
12
by: JB | last post by:
Hi All, Is it acceptable to use a fixed width vertical navigation column within a fluid 2 or 3 column layout? Example. Left Column (navigation) fixed width of say 180px Right Column (main...
4
by: Alan Silver | last post by:
Hello, Having been a light reader of this ng for a few months now (after several years absence), I have noticed that absolute positioning seems to be considered a Very Bad Thing around here....
1
by: chris f | last post by:
Some of the cells in my ASP.NET 2 table have a popup that appears when the user hovers the mouse over a text area that is indicated using an anchor tag. The popup is implemented as a DIV tag...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.