Box Shadow Container Problem – Fluid?

[MBM]

I am using a separate box shadow containers on a homepage and contact page :

http://mbmitservices.co.uk/ExpressTravel2/index.html
http://mbmitservices.co.uk/ExpressTravel2/contact.php

They have different heights. Once a user submits a form on the contact page (you do not have to enter any data in the fields) the thank you message pushes the contact form down thus the box shadow is not aligned correctly. How do I fix this? I have tried to adjust the styling of the thank you message but can’t get it to line up exactly on the form without pushing it down. Is there a way to make the shadow container fluid? Or a way to split the sections of the box shadow code and then add them to the individual elements of my pages i.e. the header, main section & footer?

homepage box shadow css :

/*container styling*/

div.content {

background: #333333;

margin:0 auto 0;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

width:1000px;

height:1063px;

}



.offset-blur

{-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

contact page box shadow css :

/*container styling*/

div.content {

background: #333333;

margin:0 auto 0;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

width:1000px;

height:65.4em;

}



.offset-blur

{-webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

-moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);

box-shadow:2px 2px 1.0em hsla(0, 0%, 0%, 1.0);}

php thank you message styling :

p.phpmessage {

margin-top:0px;

margin-left:110px;

margin-bottom:-140px;

position:relative;

}

[Kitty Giraudel]

The problem is the float: left on your footer. Just add a clear element after, or clearfix the parent (.content).

[MBM]

When I added a clearfix to the mainsection div after clicking submit the thank you message was not displayed. When I added it to the footer it removed the background colour and still pushed the contact form down besides I find br style=”clear:left;” usually clears elements but not in this case.

Anyway back to the problem. I added position:absolute; to the php paragraph styling and it works perfectly in all browsers. The form stays in exactly the same position while the thank you text on clicking submit is displayed in the gap between the header and form.

p.phpmessage {

margin-top:0px;

margin-left:110px;

position:absolute;

}

[Author]

Posts