CSS question...

[jp2]

Hello.

I have what i can only assume is a simple CSS question.

I am trying to make my first 100% CSS layout and i have come accross a problem.

http://www.bar-of-soap.com/jon

Just under the main content area i would like to add another *table*. For all the other tables i have used absolutle positioning. But becuase the main content area is going to change size when i add and take away content, i don't know what to do.

Any help will do!!
Thanks,
Jon

[bradyj]

Put that content area in a div, and then nest the next two divs underneath:

<div class="maincontent">
<div><p>this is your main content section</p></div>
<div><p>this is your second content section</p></div>
</div>


Absolute position then can be applied to the 'maincontent' div, with a fixed width you specify, and a CSS, also, of:

height: auto;
overflow: auto;


You may need to change the overflow to either none or visible, depending on what works to make sure the content 'flex'es to the proper size.

For your code specifically, I would recommend:

<div id="content">
<div id="sitecontentmain">
<h1>HOME</h1>
<p id="pagetitle">13/5/04 - Believe in yourself...</p>
<p id="contenttext">The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here The main site content goes here ....</p>
</div>
<div id="othercontent">
<h1>Other Content</h1>
<p>hello hello hello hello hello</p>
</div>
</div>


Play with this, and post it up with more questions:)

[jp2]

ahh yes i see what you are saying.

Im just struggling to get my head around exactley how to do it.

Thanks for the help.