Margins in a div aren’t working properly

I’m making some experiments with a simple fluid grid only with a sidebar and a main area. When I try to put some margins in an div inside the main area, the margin doesn’t work properly, but in the sidebar it works fine. Here is the Jsfiddle: 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;
}

Probably the problem is related with some part of the .sidebar and .mainarea CSS, but I don’t know which one.


solution

Here is your answer.. Example here.

Your problem was that the sidebar was taking up 25%, and the mainarea was 75%.. This would normally work, however, you had a border-right of 1 px.. Therefore the total adds up to 101%..

These are the changes I made:

.sidebar {
  float:left; /* Added this in */
  width:24%; /* Changed to 25 to 24 */
}

Let me know if you need anymore help, or if you have any additional questions.