Topic: A DIV inside a DIV

I am working on a website for my employer. Originally my design included a DIV to act as a "frame" for the content and menus, and a smaller DIV within for the content, including its own scrollbar for overflow. My employer has said she does not like the little scrollbar, and would prefer to have the one main scrollbar on the extreme right-hand side of the browser.

So I have set about appeasing her but have been frustrated to find, when I set my inner DIV to contain all of the content in one go, the outer DIV stops not far from the upper edge of the inner one. I know DIVs do not extend one pixel further than they must under normal circumstances. But is there any way the outer DIV could be adjusted to encompass the inner one without the inner DIVs height being defined in absolute terms?

I appreciate any help you can offer...

Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

uhm.... im not sure if I totally understand you but you said that the scrollbar will not reach the extreme end of the screen? You could try setting the margin to 0 on the body. Sorry if that doesn't help. Maybe post an example.

Forget those weird work around, position:fixed; is your friend.

Check what I said in Scroll Bar Color for scrollable DIV. Notice that that's what they use on http://www.rammstein.com.

Hope that helps,



(Edited by poi on 07-27-2006 22:45)

It's not the scrollbar that's the problem... it's the "frame" DIV.

Previously the width and height of both elements (outer and inner) were defined in pixels. Now, the width is defined but height is set to "auto." The inner DIV extends to include all of the content, but the outer DIV stops right around the beginning of the inner DIV, like so...



Hopefully that will help clear up what I'm talking about...

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

quote:

---

poi said:

Forget those weird work around, position:fixed; is your friend.

---

poi,

Thanks for the advice. However, when I tried position: fixed; on the outer DIV (remembering my offsets of top: 20px and left: 10%), the entire outer DIV got shoved up into the upper lefthand corner of the browser.

Unfortunately I only have IE on this machine, and that's what my boss uses as well.

Sigh.

*misses his Firefox @ home*

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

Check Making IE 5.5+ use position: fixed; by Mark 'Tarquin' Wilton, and 'position:fixed' in Internet Explorer by Anne van Kesteren.

Oh, and Firefox is not the only alternative/standard compliant browser out there



(Edited by poi on 07-27-2006 23:05)

quote:

---

poi said:
Oh, and Firefox is not the only alternative/standard compliant browser out there (Edited by poi on 07-27-2006 23:05)

---

Oh, I'm aware, I'm just a big Firefox fan.

That's an improvement. Now I'm looking for a way get the length of an element that doesn't have its length initially defined... In my case, the inner DIV is set to Auto which allows it to hold all the content of the page. Once that content is inserted, the length of the element should be defined. At that point I should be one 'getElementById' expression away from getting an actual figure.

I'll continue my search, but any help would be appreciated.

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

Perhaps I am missing something here, but the containing div should automatically expand to contain its child elements.

The only case in which this doesn't hold true, AFAIK, is when floats are involved. Are you using any floated elements inside this div? IF so, following them with an element with the CSS attribute of 'clear:both;' will force the container to expand.
There should be no reason whatsoever to resort to Javascript, or using position:fixed on anything, if all you want is for your div to contain its child elements.

Do you have a workign example you can show us?



(Edited by DL-44 on 07-28-2006 15:44)

Gothmatum: But with position:fixed; you don't need to care about the height or length of the content at all. You simply place all the fixed stuffs, and give the appropriate margin to the content DIV and voila. It works all by itself.

DL-44: The child in this case is another DIV element with an 'auto' height. Is 'auto + 25' valid for the height of the parent? I didn't think it was.

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

That the height is set to auto is irrelavent. In fact, you don't need to specify height:auto;, as that is the default for the attribute. You don't need to specify a height for the containing div either, and it would be counterproductive to try to do so (as you're learning now )

Poi - for what purpose would he want to use position:fixed in this case? I'm not seeing a correlation between the div not properly containing its child elements, and using position:fixed.

Again though - if you have a working example you can show us, it would far easier for us to help solve your problem.

It will also help to know what the purpose of the containing div is - does it really need to be there in the first place?

Yes, it does... the parent DIV has a background pattern, and the containing DIV has a solid color background designed to make the text within more ledgible.

The reason why poi might be pulling so hard for position:fixed; (other than really, really liking it) would be that I could specify the width and height of the parent/underlaying DIV and then "bolt" it to the background of the page, while the child DIVs scroll over it.

Here's a screenshot (content obscured):



1. The background can change by clicking one of those little boxes in the upper-left.

2. This menu bar is contained in #4.

3. This submenu bar has content that changes based on which option in #2 is rolled over, and is also contained in #4.

4. The infamous parent DIV. I have removed it's height attribute entirely and as you can see it does not even cover a majority of it's child DIV...

5. Which is here. I've removed the height attribute from this element as well, and it contains the content and that's it.

Does that help?

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

quote:

---

Does that help?

---

Not a whole lot. Seeing it in action, with the code is what we really need. Perhaps you coudl set up a dummy page if the content is sensitive...

I finally remembered the web address of my old ISP and remembered I had webspace available there...

http://users.zoominternet.net/~gilrandur/example/

That should be more helpful.

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein

#frame{

		background-color : transparent;

		background-image : url(../images/cnvbkgnd.jpg);

		background-attachment : fixed;

		position : fixed;

		_position : absolute;

		top : 20px;

		_top : expression(eval(document.body.scrollBottom));

		left : 10%;

		width : 800px;

1) you don't want to use background-attachment:fixed, or position:fixed for this.

2) there is no need for position:absolute; and it is likely the cause of your problem. when you position something absolutely, it is removed from the normal document flow, and will not follow nomal protocols for interaction with other elements.

Also: ACK! tables for layout?

No Doctype?

You've got quite a host of validation errors - http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fusers.zoominternet.net%2F~gilrandur%2Fexample%2F

Always best to get those issues straightened out before trouble shooting layout problems!

I'll deal with the table-layout issues later...

Only 1 validation error remains, and it's an odd one. The validator has picked out one 'onMouseOver' to gripe about but leaves the other two alone. I'm confused...

~~~
Insanity: doing the same thing over and over again and expecting different results. - Albert Einstein