CODEWITHSUNDEEP
css
datasn.io
datasn.io

Reputation: 12867

CSS element outside of static position?

I'm having a weird problem at here: http://www.princessly.com/about-us/

See the bottom of the page where there's the "Get Princess Newsletter".

The newsletter <form id="newsletter-validate-detail"></form> is no where to be found by Firebug in Firefox. It seems to be out of the static flow but its children, namely h2, .newsletter-text, and .newsletter-paragraph are all displaying fine, yet OUTSIDE of their parent, the white box of .footer-newsletter.

This is causing me problem because I can't position the form inside .footer-newsletter which is a 2px border white background box with 2px border-radius, its parent.

Thus far I tried:

  1. overflow:hidden for .footer-newsletter
  2. position:static for #newsletter-validate-detail
  3. position:relative for #newsletter-validate-detail
  4. display:block for #newsletter-validate-detail

But none of them worked.

Any idea what the culprit would be? Thanks a lot!

Upvotes: 0

Views: 68

Answers (1)

Andres I Perez
Andres I Perez

Reputation: 75379

You're not properly clearing your newsletter section. Add this to fix it:

.footer-newsletter:before, .footer-newsletter:after {
  display: table;
  content: "";
  zoom: 1;
}

.footer-newsletter:after {
  clear: both;
}

And your form is not being found because the ID does not exist in your CSS. Define it and it shall appear:

#newsletter-validate-detail {
    display: block;
    float: left;
    margin: 0 0 10px;
    width: 100%;
}

Upvotes: 1

Related Questions