Needing help with CSS

[obelix]

http://www.obelix.ca/zeroone/beauty/index4.html

The link above shows what I'm trying to do. Basically I need 2 headers at the top of the page, a main content area that contains 3 boxes that need to be able to expand dynamically, and 2 footer elements.

I can't seem to get the boxes in the middle to fit inside the enclosing container. The enclosing container is "supportingText" and it won't even appear unless I hardset the height... I would like this section to expand dynamically as the boxes expand. Any ways this is possible?

Your help is much appreciated!

 

[bobber205]

Nice

Good for you! All of your coding seems to be done in hand.
I'm always happy to see that.

As for growing a box dynamically, I would access the <div>'s style.width and height properties with Javascript.

Make sure and don't forget to use document.getElementById.

But all and all, a well done page.
Good luck.

 

[obelix]

I'd really rather stay away from JS is there any other way this can be done? It always seems like doing a straight CSS design is infinitely harder than doing it with tables... (sigh)

 

[bobber205]

I don't know why you don't want to use JS.
Super easy. And this will take about 1 minute to code.

And table designs are BAD!

And how did you dynamically change the table's values?

 

[obelix]

I don't want to use JS because its not always enabled on all browsers and in the case that it is disabled I'd still like the site to be viewable. Also I'm not sure how JS could be used to correct this problem (any code samples?)

Right now the tables values do not dynamically change... that is the problem. The gray area with the background is a hard-set value at 200px and although it sort of work in IE in Firefox and Safari the result is terrible. The box that says "content left" should not be extending past the bottom of the gray background.

 

[bobber205]

var cssBox = document.getElementById("mybox");

cssBox.style.width = "100px";

That should get you started. And mybox should be whatever the "id" attribute in your <div> tags are.

Good luck.