htmlcssoverflowclearfix

100% height div disappears

I am attempting a liquid web design that includes a shadow on the outside of the content box.

This cal all be seen here: http://mikesidelka.com/2/

So I attempted to do this, by having the content into one containing div, and the shadows in a separate. This seems to work just right, except for when the window is shrunk past the min-width's defined.

The shadows are contained in a div container set to 100% width and height, with a min width of 882px (700px min width for content plus the two shadows set to 91px min width). The left and right shadow's are in separate div's set to 10% width (min-width 91px) with a middle "spacer' div at 80% (min-width 700px) all set to float left so they will appear as separate columns. If you click the link, you can see the r-shadow div will disappear if the window shrinks to a width that breaks the min-width rules. I have tried all overflow parameters and the clearfix. I've also tried a few other tricky options with absolute positions. This is so far the cleanest, minus the div disappearing. Please advise.

Solution

  • No need for separate divs for shadows, as pol stated, CSS box-shadow property would do, here a snippet:

    html,
body {
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.inside {
    width: 66%;
    height: 100%;
    margin: 0 auto;
    background-color: lightgray;
    box-shadow: 12px 0 15px -4px gray, -12px 0 8px -4px gray;
}
    <div class="container">
    <div class="inside"></div>
</div>