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.
