3 Div Rows - 2 Fixed, One Fluid | Height Help Options

[Johnex]

Hi guys.
I am having some issues trying to get 3 div rows to fill out another parent container. I want the top row to have a fixed size, as well as the bottom row. The middle row should take up all the remaining space that the parent container can supply. The middle div may not be fixed, i need it to expand depending on the parent container size. This is what i have come up with so far:

CODE

<div style="width: 22px; height: 600px; float: left;">
    <div style="width: 17px; height: 17px; background-color: #000000;"></div>
    <div style="width: 17px; height: 100%; background-color: #999999;"></div>
    <div style="width: 17px; height: 22px; background-color: #000000;"></div>
</div>
<div style="width: 22px; height: 600px; background: #000000; float: left;">
</div>

I attached an image bellow showing what that does. As you can see, the left div is the one that i tried to play with, the right one is to see how big a height of 600px is. For some reason, the middle div is taking the full 600px, causing the other two divs, the fixed ones, to overflow. Is there any way that i can fix this?



This post has been edited by Johnex: Jun 18 2007, 11:18 AM

[Frederiek]

Is it something like explained at 456bereastreet.com's CSS frames article that you're after?

[Johnex]

Yeah, kinda. But as i have shown in the image and in the code, its needs to be inside a parent container. What i want to do is be able to vary the parent container height, and have the content inside expand to fill it. 3 rows are the content, 2 of those are fixed, ie the top and bottom ones. The middle one varies in height, filling out the remaining space. I tried doing this, but you saw the result in the image that i attached. Anything that can be done?

[Frederiek]

See if you can find something here: http://www.d.umn.edu/itss/support/Training...design/css.html

[Johnex]

which one did you have in mind?

[Frederiek]

How about Aaron Gustafson's Let them eat cake article at Alistapart.
Admitted, that one can't be found at the link I gave you, but many links there do point to ALA articles.
Just a question of looking around

[Johnex]

might have to resort to javascript. im making a windows style div container with resize and drag capabilities, so i wanted a fixed column, fluid column, fixed column design, and the same with the rows, so that when the container size is changed, the content follows. might as well just let javascript handle that too.

[Dr Z]

I think I understand what you want to achieve. But the answer may be good news and bad news.

Good news:
I have developed a technique (I named it "WebZoneZ") that will do all the hings you plus much more. No javascript is involved pure html & CSS.


Bad news:
It is ia impossible to explain it here. I have been working on this spare-time (or should I say scarce-time) project for only 3+ years. I hope I will be opening a web site mainly for this. It will not only describe the technique, but the substantial research & experimentaion results that it was built on. So, you will have to be patient till the site is open (no promises as to when).

[Johnex]

Any approximate time for the opening? Can't you just help me out with the height part? That is all i need, no need for explanations and such, i can figure that out for myself.

[Dr Z]

Any approximate time for the opening? Can't you just help me out with the height part? That is all i need, no need for explanations and such, i can figure that out for myself.

It is not that simple, but for the "height part" I can offer a quick band-aid. You have use absolute positioning. It would look something, using 3 different divs: top, center & bottom.

div.top
{
position: absolute;
width: 17px;
height: 17px;
top: 0px;
left: 0px;
}

div.center
{
position: absolute;
width: 17px;
top: 17px;
bottom: 22px;
height: auto;
left: 0px;
}

div.bottom
{
position: absolute;
width: 17px;
height: 22px;
bottom: 0px;
left: 0px;
}

Warning.... It will work with most browsers, including IE 7, but not with IE 6 or lower. I hope it helps.

[Darin McGrew]

Warning.... It will work with most browsers, including IE 7, but not with IE 6 or lower.

When did browser usage change so much that you could cover "most browsers" with something that doesn't work in MSIE 6?

[Dr Z]

Warning.... It will work with most browsers, including IE 7, but not with IE 6 or lower.

When did browser usage change so much that you could cover "most browsers" with something that doesn't work in MSIE 6?

Simply put, I have been working on this project of mine for about 4 years. The stament I made holds true for very detailed experiments/studies using thefollowing browsers:

* Internet Explorer 6.0 & 7.0
* Mozilla 1.7
* Firefox 1.5
* Netscape 7.1 & 8.1
* Opera 7.54 & 9.1

As far as I am concerned, I made it clear, when I wrote that it will not work with E 6 or lower.

How clearer can I get?

This post has been edited by Dr Z: Jun 23 2007, 08:52 PM

[Darin McGrew]

Ah, I guess you really are referring to "most browsers", rather than to "the browsers used by most users" (which unfortunately is dominated by MSIE 6, which still has the lion's share of the browser market).

[Peter1968]

Hmm, it's trending toward a skinny lion though...on my main site (year-to-date), IE 6.0 usage is at about 32%, whereas IE 7.0 is at 25%.

The various Firefox's come it at 22%

Considering it's a little harder to fudge a user agent string for IE than it for others, I'd call those figures fairly accurate.

I imagine though the IE 7.0 figure will only get higher as more people abandon Win98/ME and 2K and go to XP and Vista.

[Johnex]

Well, that doesn't really help me, since that expands to fill out the browser window, not the container that i have mentioned several times. Using absolute is not an option. It is easy to do what you did, but the issue here is to be able to fill out the container only....And the container can have any height.

<div style="width: 22px; height: 600px; float: left;"> <-- Variable height......Specified by javascript.
// Expanding rows
</div>

[Johnex]

I still need help with this, no one has managed to get an answer yet.