Automatically resizing divs

Depending on error msg being present or not

[carhire]

Does anyone know if there's a quick and easy way for me to manage the following:

I have a page set up without tables, two columns with a header and footer nav bar. The right hand column is divided into an upper and lower part with a form in the upper part.

Depending on what the user inputs into the form an error DIV is created (if you input wrong dates etc it shows an error). This error appears at the top of the form input areas and it pushes all the content of the right column down a lot (the error changes depending on what the problem is).

Is there any way for the page to automatically resize to the include this error message because at the moment the text of the right hand column gets pushed down over the footer nav bar.

Here's the CSS of the Main area that includes the two columns:

#main {
color: #000;
margin: 0em auto 0em auto;
padding-bottom: 5px;
width: 745px;
text-align: left;
position: relative;
background: #fff;
border-left: 1px solid Black;
border-right: 1px solid Black;
}

#main #sections {
position: relative;
}
#main #leftColumn {
padding: 2px 10px 0px 10px; /* Box Model Hack */
width: 400px;
\width: 200px;
w\idth: 430px;
font-size: 10px;
}
#main #rightColumn {
margin: 5px 0px 0px 445px;
padding: 10px 0px 0px 0px;
width: 290px;
position: absolute;
top: 0px;
}

The error DIV is created with position: relative; .

Any ideas anyone?

[SuzyUK]

you have your right column positoned absolutely, so it is completely pulled out out of the flow of the document, (think of it like it's just been "stuck" on the side actually).. that's why as it expands it will not push the footer down, it just grows over the top of it.

The best way to have both columns control the position of the footer is to have them both remain in the flow. If your content is source ordered (content first, right column second) in the HTML then you could try floating the content column left and removing the position absolute fron the right column..

this puts it back in the flow and it should move the footer down as necessary

example:

#main {
color: #000;
margin: 0 auto;
width: 745px;
text-align: left;
position: relative;
background: #fff;
border-left: 1px solid #000;
border-right: 1px solid #000;
}

#leftColumn {
width: 450px;
float: left;
background: #ccc;
}

#rightColumn {
margin: 0 0 0 450px;
width: 290px;
background: #ffc;
}

there will be minor difference in the widths due to IE box model and 3px float bug, but if you tweak the width of the right column so it doesn't exactly fit the space it might even work nicely across all browsers without the need for width hacks, (depending on your content of course)

Suzy

[carhire]

Thanks for the detailed reply. I'm a relative novice to CSS at this level so it really helps to have someone explain this so clearly. I'll try your suggestion and thanks again.