Elements break line when sum of widths equal 100%

Question

I'm trying put a input and a button display inline, where input need fill 70% of row, and button 30%

So, I set css 70% and 30% to elements, but elements will break line

How to can I fix this problem?

* {
  margin: 0px;
}

input {
  width: 70%;
}

button {
  width: 30%;
}

<div>
  <input type="text" />
  <button>Button</button>
</div>

Jamie Barker · Accepted Answer · 2018-08-07T10:28:56.267

7

Add this:

* {
   box-sizing:border-box;
}

It's because the input/button has padding and border added by the browser so the total ends up > 100%.

What the code above does is tell all elements to include padding and border into the width value.

You will also be suffering from a white-spacing issue. Basically because your elements are on a separate line, it adds white space in-between. To combat this you can either put them on the same line with no space or comment the area in-between, like so:

* {
  box-sizing: border-box;
  margin: 0px;
}
input {
  width: 70%;
  border: 3px solid;
}
button {
  width: 30%;
}

<div>
  <input type="text"><!--
  --><button>Button</button>
</div>

Setting the div element to have font-size: 0px; would also work to remove the white-space, as long as you're not affecting the relative font-size of any child elements by doing so.

edited Aug 07 '18 at 10:28

answered Jun 16 '15 at 16:19

Jamie Barker

8,145
3
29
64

I increment this in CSS, but is not working – Lai32290 Jun 16 '15 at 16:24
http://jsbin.com/kacidaxoga/edit?css,output – Lai32290 Jun 16 '15 at 16:24
Not working from here too. – m4n0 Jun 16 '15 at 16:25
@Lai32290 There was a second part causing it to not work. Added the extra information to the answer – Jamie Barker Jun 16 '15 at 16:29
why is necessary for fix this problem? – Lai32290 Jun 16 '15 at 16:36
1

@Lai32290 As I said in the answer, they are on a separate line so it adds white-space in-between the elements. The other alternative is to put them on the same line. – Jamie Barker Jun 16 '15 at 16:37
The comment-white-space stuff just blew my head off D: – João Menighin Feb 19 '18 at 14:32

score -1 · Answer 2 · answered Jun 16 '15 at 16:24

-1

The button has a border by default so 30 plus 70 is actually a little above 100% try this:

input {
  float: left;  
  width: 69%;
}
button {
  float: left;
  margin: 0px;
  width: 30%;
  box-sizing: border-box;
}

answered Jun 16 '15 at 16:24

Adam Buchanan Smith

9,422
5
19
39

Elements break line when sum of widths equal 100%

2 Answers2