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.
No need for separate div
s 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>