senkrechte balken links und rechts bündig an wrapper

joniversal · 18.11.2014

hallo liebe leute,

ich bau gerade meine erste website und komm jetzt nicht mehr um ein aufgeschobenes problem drumrum.

die wesentlichen elemente sind:

header (grau)
footer (orange)
senkrechte balken bzw. shadow_left, shadow_right (grün)

so sieht es zur zeit aus:

die grünen balken (shadow_left und shadow_right) sollen aber bündig links und rechts am header bzw. footer anliegen. so wie hier:

die css sieht so aus:

html,

body {
margin:0;
padding:0;
height:100%;
}

#wrapper {
min-height:100%;
position:relative;

margin-right:auto;
margin-left:auto;
width:1060px;
}

#shadow_left {
/* background-image:url(Slices/Bilder/PORTFOLIO_LAYOUT_2_03-03.jpg); */
background-repeat:repeat;
width: 50px;
min-height:100%;
float: left;
background-color:#0C0;
}

#shadow_right {
/* background-image:url(Slices/Bilder/PORTFOLIO_LAYOUT_2_05.jpg); */
background-repeat:repeat;
width: 50px;
min-height:100%;
float: right;
background-color:#0C0;
}

#header {
background:#ededed;
padding:10px;
}

#content {
padding-bottom:100px; /* Height of the footer element */
}

#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}

und die html so:

</head>

<body>

<div id="shadow_left"> </div>
<div id="shadow_right"> </div>

<div id="wrapper">

<div id="header">
</div>

<div id="content">
</div>

<div id="footer">
</div>

</div>

</body>

</html>

ich hab gar keine idee mehr wie man die beiden grünen-shadowbalken bündig an den wrapper bekommt.
ich würd mich freuen wenn einer von euch eine lösung parat hat.

vielen lieben dank schonmal.