0

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

4
  • Can you show us some html/css that you have tried, you didnt mention the inputs at al in your text.
    – Razz
    Sep 2, 2013 at 20:34
  • Sorry, the labels wrap around the inputs.
    – Ian
    Sep 2, 2013 at 20:37
  • And the inputs has width: 100%?
    – Razz
    Sep 2, 2013 at 20:38
  • Yes. I have added the relevant CSS
    – Ian
    Sep 2, 2013 at 20:40

2 Answers 2

2

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/

2

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

Change

 padding: 1%;

to

padding-right: 1%;
3
  • It's less obvious, but it still happens, and now there's no spacing around the labels. snag.gy/ltHNg.jpg
    – Ian
    Sep 2, 2013 at 20:45
  • You can make input width to something 97% ; you have given input width 100% as well as padding: 0px 3px 0px 6px; which is more than 100% width Sep 2, 2013 at 20:53
  • I've found that making the total width 99% usually solves a lot of those problems, especially the overlap, better to go 'not enough' than 'too much' Sep 2, 2013 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.