ok i'm another newbie stuck at trying to make a container table stretch to fit it's DIV contents. I've tried many things and I'm here finally for some help.

I have two divs horizontally positioned and floated. first div has graphic folowied by a paragraph and the second is large graphic. They both are in a table and the table will just not stretch vertically to contain these two divs.

Here the code:



Any suggestions on how to make it stretch??
Back to top

When you float or position absolutely [you have to pick one or the other, floats override positioning.] you pull the element out of the document flow.

The easiest solution is to get rid of the table, and just make a css/p layout, without tables.

There are ways around this, for example, you can place the two divs inside another div, and give that containing div a height, and no absolute positioning.

Or you can assign a height to the table cell throught css that corresponds to the height of the two divs.

But currently, as far as the table is concerned, there is nothing in it that it can size itself to.

With floats, there are some less elegant hacks, like putting another div under the floats and give it a css value of "clear:both;", that will force the container to allow for the height. Only with floats though.

As soon as you absolutely position something, it's totally out of the document flow, no other element will size itself to it any longer.

What you probably want is something like this:



Then size head-container to be the correct height, give it position: relative, then the table will make room for it.
Back to top

it worked with your method, but not for my purposes. It works if I give it a specific height in pixels but not in % height which I am trying to achieve. I need the table to streatch to 100% as contents will vary page to page.

I chose having one table as some experts recommend using one table if you're new to CSS and also because of browser compatibility issues.

your answer helped to understand the begaviour and I tried to change 'absolute' to 'relative' for both divs and gave minus - values from 'top' to the second div to bring the image up but the results came out very different in firefox and ie.
Back to top

No, you don't 'need' this, you 'want' this behavior. Your user doesn't 'need' this, it's just an idea you have about how a page should look, I used to be interested in that idea too, but gave up on it, it's pointless, a waste of time in my opinion, but apparently it's still a step beginning web developers tend to go through to this day.

Do yourself a favor and skip that step, you'll be better off, and will be where you would have arrived in a few years anyway.

If I want a header to be positioned at the top of the page, I do it like this:


The overall container div sets the width for the main site.

The header has a height set to it.

The table has no height, and expands to its content. If you have a particular page with basically no content, and want the table to go down further, I just use spacer divs, set to varying heights, enough to push the table down far enough in the browser window.

You can't restrict the height of a table, by the way, it's not technically possible, both MSIE and Firefox will always let the contents of the table cells override any explicit height setting of the table. Opera is as far as I know the only browser that will actually set a hard coded height on a table that can't be overridden by cell content height.

You're trying to make something happen that you still don't have the ability to do, and will just result in errors cross browser, and really that is pretty much totally pointless as far as 99.9% of your users are concerned.

Neither CSS or tables have an equivalent * wildcard height/width feature like frames do, so you have to either declare heights/widths in percents or some static thing like px,em,ex etc.

Obviously, if your table has a lot of content, you don't want the header to be a % of the height of the overall page, that would look terrible.

Real browsers like Firefox/Mozilla, Opera etc, support min-height, max-height, min-width, max-width, but MSIE doesn't, we'll see how IE 7 does with that.
Back to top