CODEWITHSUNDEEP
htmlpaddingpercentagecss
Ian
Ian

Reputation: 6104

Pecentages and padding don't add up correctly

I have two labels inside a div that's width is 75%, and its max-width is 700px. The labels, when set to width: 49%, padding (or margin) :1% and display: inline-block, don't display next to each other or stick out over the edge of the container. However, when the width is 49.5%, they do until the containing div is less than its max-width. I have tried setting the box-sizing to border-box, but it only helped a little.

I've also tried using a pixel padding instead of a percent, but that didn't work at all.

Here is the relevant code:

#container {
  width: 75%;
  max-width: 700px;
  border: 1px solid #333;
  box-shadow: #d3d3d3 0px 0px 30px;
  border-radius: 4px;
  margin: auto;
  margin-top: 10%;
  background-color: white;
}

label {
  display: inline-block;
  width: 49%;
  font-weight: bold;
  font-size: 12px;
  padding: 1%;
}

input {
  display: block;
  border: 1px solid #333;
  border-radius: 2px;
  background-color: white;
  width: 100%;
  height: 24px;
  padding: 0px 3px 0px 6px;
  margin-top: 5px;
}

wrong

Right

Upvotes: 0

Views: 105

Answers (2)

Paramasivan
Paramasivan

Reputation: 791

49% + 49% + 2% + 2% = 102%

Change

 padding: 1%;

to

padding-right: 1%;

Upvotes: 2

Razz
Razz

Reputation: 4005

It can all be fixed with display: block; and box-sizing: border-box;

label {
  display: block; //inline-block gives a spacing between the elements.
  float: left;
  width: 49%;
  font-weight: bold;
  font-size: 12px;
  margin: 1%;
}

input {
  display: block;
  border: 1px solid #333;
  border-radius: 2px;
  background-color: white;
  width: 100%;
  height: 24px;
  padding: 0px 3px 0px 6px;
  margin-top: 5px;
  box-sizing: border-box; //without this the input is 100% + 9 pixels wide. which gives the unwanted effects
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

Here is a working jsFiddle: http://jsfiddle.net/TSxec/1/

Upvotes: 2

Related Questions