100% percentage total flowing over the next line

Question

this is my code: http://jsfiddle.net/Loaz7gcu/

I have three inputs which should fit on one line, equaling 100% but instead one sits on the next line. I have cleared all the margins and padding but still no luck. What am I doing wrong here?

My example CSS:

* {
    margin: 0;
    padding: 0
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}

try setting them in a container div and use float properties on them — Dev Man, Sep 15 '14 at 15:05
It's math. 3*30 + 2*10 is above 100%: http://jsfiddle.net/Loaz7gcu/2/. — loveNoHate, Sep 15 '14 at 15:05

Anonymous · Accepted Answer · 2014-09-15T15:14:17.620

3

You could do it by using box-sizing: border-box; and display:inline-block; to input and use font-size:0px; to div for remove the white-space and then set font-size: 16px; to input.

JSFiddle - DEMO

HTML:

<div style="width: 100%; font-size:0px;">
    <input class="one">
    <input class="two">
    <input class="three">
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
input {
    display:inline-block;
    font-size:16px;
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}

edited Sep 15 '14 at 15:14

answered Sep 15 '14 at 15:09

Anonymous

10,002
3
23
39

1

Or.. **float the inputs** or remove the whitespace from the HTML. – Paulie_D Sep 15 '14 at 15:10

score 3 · Answer 2 · edited May 23 '17 at 11:45

3

There are two things you should take care about:

In inline flow, there's a whitespace between inline level elements.
UAs apply a border to input elements by default which causes the total width exceeds 100% of width of the container.

That being said, you could float the inputs and give box-sizing: border-box to achieve the goal:

Example Here

input {
    float: left;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

And don't forget to clear the float at the end of the container.

edited May 23 '17 at 11:45

Community

1
1

answered Sep 15 '14 at 15:10

Hashem Qolami

97,268
26
150
164

1

You might also want to consider: [Which method of ‘clearfix’ is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best/1633170#1633170) – Hashem Qolami Sep 15 '14 at 15:26
1

yesterday I learned about how to remove the whitespace between inline-block elements and today I used it. lol :) – Anonymous Sep 15 '14 at 15:41
1

@MaryMelody It shows that you're on the right track! keep on. – Hashem Qolami Sep 15 '14 at 15:47

score 2 · Answer 3 · answered Sep 15 '14 at 15:16

Another solution is to use display: flex in your div container:

html

css

* {
    margin: 0;
    padding: 0
}
.one {
    width: 30%;
    margin-right: 10%
}
.two {
    width: 30%;
    margin-right: 10%
}
.three {
    width: 20%
}
div {
    width: 100%;
    display: flex;
}

fiddle

Ref

The flex CSS property is a shorthand property specifying the ability of a flex item to alter its dimensions to fill available space. Flex items can be stretched to use available space proportional to their flex grow factor or their flex shrink factor to prevent overflow.

score 0 · Answer 4 · answered Sep 15 '14 at 15:08

0

you need to add this

input{
   box-sizing:border-box;
}

because you have 100% + the border left and right for each element...so that's 100% + 6px; border-box will make the border to be inside the div not outside of it

and also because of the whitespace between the elements you have to get dirty with the inputs

either add them on the same line or :

   <input><!--
--><input><!--
--><input>

by adding comments such as this

answered Sep 15 '14 at 15:08

Gho

570
2
9

@JamesWillson, this works, but combined with j08691's answer about white spaces... http://jsfiddle.net/Loaz7gcu/15/ – LcSalazar Sep 15 '14 at 15:10

100% percentage total flowing over the next line

4 Answers4