Search the Community

So I have three div's that look like this: echo "<div='playerinfo'>"; ......all information goes here echo "</div>"; echo "<div='stats'>"; ......all information goes here echo "</div>"; echo "<div='weapons'>"; ......all information goes here echo "</div>"; in which are in cased in a: echo"<div id='wrapper'>"; Whenever I try to margin-right the "playerinfo" div OR marign-left the "stats" div, the background color stretches to the end of the margin. My CSS for the two div's look like this: body{background: #0D0D0D;} h1{ color: white; text-align: center; } div{ background-color: #422100; color: white; } tab{ float:right; } p{ text-indent: 25px; text-align: justify; color: white; } #wrapper{ height: 100%; width: 100%; background-color: #0D0D0D; } #nav{ position: relative; float: left; clear: left; display: block; width: 100%; height: 3.25%; margin-left: auto; margin-right: auto; list-style-type: none; border-color: white; background-color: #0D0D0D; margin-top: .5%; } #nav ul{ text-align: center; } #nav ul li{ display: inline; position: relative; border: thin solid white; border-radius: 5px; margin: -2px; padding: 5px; box-shadow: 1px 1px 1px; background-color: #422100; } h2, h3, #nav ul li a:link, #logins a:link{color: white;} #nav ul li a:visited, #logins a:visited{color: white;} #logins{ float: right; border: thin solid white; border-radius: 5px; width: 20%; padding-left: 5px; text-align: center; box-shadow: 1px 1px 1px; margin: -6% 0 -5% 0; } #content{ position: relative; float: left; display: block; border: thin solid white; width: 25%; padding: 0 15px 0 15px; border-radius: 5px; box-shadow: 5px 5px 5px; margin-top: 1%; } #content h1,#news h1,#legal h1,#playerinfo h1,#stats h1{ border-bottom: thin solid black; box-shadow: 0 1px 0; } #banner{ border: thin solid white; width: 100%; height: 73px; border-radius: 5px; box-shadow: 5px 5px 5px; color: white; } #news{ position: relative; display: block; float: left; margin-left: 3%; border: thin solid white; padding: 0 15px 0 15px; width: 35%; border-radius: 5px; box-shadow: 5px 5px 5px; margin-top: 1%; } #legal{ position: relative; float: left; border: thin solid white; border-radius: 5px; box-shadow: 5px 5px 5px; width: 25%; margin-left: 4%; margin-top: 1%; padding: 0 15px 0 15px; } form{ border: thin solid white; width: 35%; padding: 0 5px 0 5px; margin-left: auto; margin-right: auto; } #playerinfo{ float: left; border: thin solid white; width: 25%; border-radius: 5px; box-shadow: 5px 5px 5px; padding: 0 15px 0 15px; margin-right: 5%; } #stats{ float: left; margin-left: auto; margin-right: auto; width: 18%; } I'm not understanding why the "margin-right: 5%;" in #playerinfo is stretching the div background color out all the way to the margin's ending point in which I DO NOT want. I just want the black background to show in between the two divs and not the brown (current color that will be changed soon). I would like to see the "stats" div centered also.