CODEWITHSUNDEEP
htmlcssformsjquerystyling
L84
L84

Reputation: 46308

Footer going under a DIV

I have a form that is being submitted using AJAX. When the form submits it changes to display:none and a div with the success message shows in its place.

I am unsure how to prevent this. I know its CSS related. Here is the CSS for that div 

#ajaxform{
    position:relative;
z-index:1
}

#ajaxdiv{
    display:none;
    position:absolute;
    height:auto;
    width:650px;
    background-color:#f3f3f3;
    z-index:10;
}

What would you guys recommend trying so the overlap does not happen.

Thanks

Upvotes: 2

Views: 284

Answers (3)

kheya
kheya

Reputation: 7612

You have a div

If you add min-height:100px, then it seems showing without clipping.

<div class="box_fullwidth" style="min-height:100px">

I just signed up and played with the div code.

I also removed the 2 line breaks

Upvotes: 1

citizen conn
citizen conn

Reputation: 15390

Change your #ajaxdiv to position:relative;

Also quick FYI: Don't use <br /> tags to position content. Break tags should be used to specify a break in text where you want to manually break a line of text. For positioning use padding or margin. Im referring to the two <br /> tags you have above the #ajaxdiv container

Upvotes: 1

Calvin Davis
Calvin Davis

Reputation: 288

The problem here is that your #ajaxdiv has position:absolute. If you remove the absolute positioning then that should solve your problem, although you probably have absolute positioning on the element for a reason, in which case it might just create new problems!

Upvotes: 2

Related Questions