I have a #wrapper
, which contains all page content, and I'd like to place another div around it with a shadow border, #shadowwrap
. I've been staring at this stuff for way to long today, and my brain's stuck...
#shadowwrap {
background:url("images/shadowborder.png") repeat-y center;
background-color:transparent;
max-width:1000px;
min-width:1000px;
min-height:100%;
margin:0 auto;
position:relative;
}
#wrapper {
background-color:#FFF;
width:100%;
max-width:980px;
min-width:980px;
min-height:100%!important;
margin:0 auto;
margin-bottom:-50px;
position:relative;
overflow:auto;
}
site: http://www.hcfmissoula.com
Thanks.
You could make your life a lot easier by just applying the shadow to the #wrapper
element like so:
#wrapper {
/* shadowborder.png should be 1000px wide (10px of shadow on either side and
980px of white to create the solid background colour) */
background: url("images/shadowborder.png") repeat-y 0 0;
/* The 10px of left and right padding + 980px of width will result in a
1000px wide #wrapper */
padding: 0 10px;
width: 980px;
/* remaining CSS. I removed min-width and max-width because they were
both the same value and therefore didn't do much ;) */
min-height: 100% !important;
margin: 0 auto;
margin-bottom: -50px;
position: relative;
overflow: auto;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.