I tried css stylesheet reset which didn't do anything, and other solutions but to no fix. Margins are set to 0 on container and there is still a margin on the right hand side. If i disable the margin left 0 the extra whitespace appears on the left side. Thanks in advance.
body {
padding-top: 50px;
}
.container {
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Set the margin for all elements to 0px, this will remove the extra margin
* {
margin: 0px;
}
Also add width: 100%
to your .container
Note: Add this as the first style in your CSS. This can be overridden by the styles specified below.
Below is an update to your code.
* {
margin: 0px;
}
body {
padding-top: 50px;
}
.container {
width: 100%;
overflow: hidden;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0 0 0 0;
}
#content {
overflow: auto;
background-color: #FFFFFF;
margin-left: 0;
margin-right: 0;
}
#content-left {
color: #FFFFFF;
float: left;
background-color: #666666;
width: 30%;
}
#content-right {
color: #FFFFFF;
float: right;
background-color: #333333;
width: 70%;
}
<body>
<div class="container" id="main">
<div id="content">
<div id="content-left">
<div>LEFT</div>
</div>
<div id="content-right">
<div>RIGHT</div>
</div>
</div>
</div>
</body>
Setting the width of the #content div to 100% will fix your problem. It's not a margin issue. For the width % to work on the inner divs, it needs a container width to base off of.
#content{
overflow: auto;
background-color:#FFFFFF;
margin-left: 0;
margin-right: 0;
width: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With