Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS - Content appearing outside a div
    text
    copied!<p>I'm having some trouble with my web page. A picture probably descibes it best so here it is:</p> <p><a href="http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png" rel="nofollow noreferrer">http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png</a></p> <p>The text at the bottom is supposed to be inside the white area. I want the white div to change in height depending on the content. I have a div that centers the white area in the middle:</p> <pre><code>#mainContainer { margin-left: auto; margin-right: auto; margin-top: 20px; width: 800px; min-height: 700px; height: 100%; } </code></pre> <p>I have also set html and body to 100%. But the problem is that the div stays at 100%, no matter how much content there is. Now a really strange thing happens when I set height to <code>auto</code>:</p> <p><a href="http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png" rel="nofollow noreferrer">http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png</a></p> <p>This is how it should look (and how it does look using height: 100%):</p> <p><a href="http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png" rel="nofollow noreferrer">http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png</a></p> <p><a href="http://www.vei24.no/" rel="nofollow noreferrer">The full page can be found here</a> (click on "Om oss" to see the page with the misplaced text)</p> <p>I would really appreciate it if someone could figure out what the problem is! :-)<br> (Hopefully the CSS and HTML is easy to understand)</p> <p><strong>Edit:</strong> I just noticed that it renders properly in Safari, but not in Firefox.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload