The two div elements are colored differently, with the right column (pink) not aligning properly with the left column (green).
For reference, here is my fiddle: JSfiddle
* {
margin: 0px;
padding: 0px;
border: 0px;
}
#wrapper {
width: 960px;
margin: 0 auto;
height: auto;
background-color: #1b191a;
overflow: hidden;
}
#leftcolum {
float: left;
width: 614px;
padding: 15px;
background: #0C6;
}
#rightcolum {
float: right;
width: 286px;
padding: 15px;
background: #F09;
-webkit-box-shadow: inset 6px 0px 8px -3px rgba(0, 0, 0, 0.5);
-moz-box-shadow: inset 6px 0px 8px -3px rgba(0, 0, 0, 0.5);
box-shadow: inset 6px 0px 8px -3px rgba(0, 0, 0, 0.5);
}<div id="wrapper">
<div id="leftcolum">
<p>Lorem ipsum dolor sit amet, etiam congue, elit ut a vivamus mauris erat. At aliquam saepe mauris sit. Aenean vulputate porttitor, cras duis magna, ac sed etiam blandit. Sem eu. Eu nulla mauris aenean magna. Nibh viverra nec ullamcorper cras non justo.
Sed suscipit fugiat tristique, et pede ante nunc amet, felis gravida nibh placerat, scelerisque sapien fames pede lorem, elit suspendisse mi quam eget. Vitae sed justo nisl vitae nisl, accumsan vitae est. Molestie urna ullamcorper, quis non bibendum.
Purus mauris eget sed elit nonummy. Vitae amet, mus tempor, turpis donec sodales in, eget lacinia eros eleifend tincidunt non eget. Dui consequat morbi justo sed tincidunt, consequat felis adipiscing, suscipit feugiat porttitor eget quam blandit
nunc, aliquam morbi aliquam purus, vivamus volutpat adipiscing sed. Elementum placerat donec molestie, iaculis est faucibus ullamcorper. Dui massa leo a fusce iaculis, massa rhoncus ipsum nascetur eleifend vestibulum quam, in aliquam in mattis quisque
iaculis nisi, id vestibulum lobortis eros tincidunt.</p>
</div>
<div id="rightcolum">
<div class="menubg">
</div>
</div>
</div>I've spent a significant amount of time attempting to fix this issue using various resources without success. I prefer to keep the HTML and CSS simple without relying on techniques like position:absolute or relative.