I am currently conducting experiments with a basic fluid grid that consists of a sidebar and a main area. However, I have encountered an issue where setting margins within a div in the main area does not behave as expected, while it works fine within the sidebar. You can view the Jsfiddle demonstration here: http://jsfiddle.net/swayziak/vVJeV/
HTML:
<section class="sidebar">
<div class="test"> bla bla bla bla bla ba balalalalal </div>
</section>
<section class="mainarea">
<div class="test"> bla bla bla bla bla ba balalalalal </div>
</section>
CSS
.sidebar {
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 25%;
height: 100%;
border-right: 1px solid #E3E3E3;
background: #FFF;
}
.mainarea {
float: right;
z-index: 100;
top: 0;
left: 0;
width: 75%;
height: 100%;
}
.test {
margin-left: 24px;
}
The issue might be related to specific parts of the .sidebar and .mainarea CSS styling, but I am unsure which one is causing the problem.
Thank you for your assistance.