Question

In the .SalesPanel class, I have set it to 100% width. I have notice its over-lapping the padding on the right that I have set in content id.

See: http://jsfiddle.net/CBAE7/9/ and look at the right padding and compare it with left padding.

What causing this and how to fix?

Also I was expecting 3 div’s on 1 row even using 100% width.. how to fix?

HTML:

<div id='content'>
  <div class='SalesPanel'> One </div>
  <div class='SalesPanel'> Two </div>
  <div class='SalesPanel'> Three </div>
</div>​

CSS:

#content {
  width: 700px;
  padding: 8px;
  overflow: hidden;
  background-color: white;
  border: 1px solid #C8CCD5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.SalesPanel {
  border:1px solid #dddddd;
  height:30px;
  float:left;
  width: 100%
}
​

Answer 1

Try this jsFiddle example.

#content {
  width: 700px;
  padding: 8px;
  background-color: white;
  border: 1px solid #C8CCD5;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.SalesPanel {
  border:1px solid #dddddd;
  height:30px;
  width: 33%;
  display:inline-block;
  margin:0;
}​