CODEWITHSUNDEEP
htmlcsspadding
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

100% width messing up with the padding

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%
}
​

Upvotes: 1

Views: 985

Answers (4)

Basem Ahmed Hassan
Basem Ahmed Hassan

Reputation: 1

Try this code:

.SalesPanel {
    border:1px solid #dddddd;
    height:30px;
    float:left;
    width: 33%;
    display:inline-block;
}

Upvotes: 0

Andrew Allen West
Andrew Allen West

Reputation: 734

Also, seeing as you are using a static 3 of them, 33% width never hurt either.

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

Upvotes: 0

j08691
j08691

Reputation: 207901

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;
}​

Upvotes: 1

Pavlo
Pavlo

Reputation: 44897

Change box-sizing property:

.SalesPanel {
  /* your stuff */
  -moz-box-sizing: border-box;
       box-sizing: border-box;
}

Initial value of box-sizing for modern browsers is content-box. It means that width: 100% will affect only the content, not counting padding and borders (your case). By changing this property to box-sizing you will fit it in the container. The actual width of the content will be calc(100% - 2px).

It's CSS 3 property and supported by IE 8+ and all other modern browsers.

Upvotes: 2

Related Questions