Textbox/input text element longer than it should be

Question

So the problem is that in my div around listbox(select) + textbox(input text) + button(input submit) I have width:250px for the whole div and for the each thing inside it I have width:100%.

That makes me assume that they should logically fill the space inside that div. But the problem is that the textbox(input text in the fiddle) is kinda longer(or the other elements are shorter?).

Any ideas why and how to solve this problem?

Demo: http://jsfiddle.net/xXVHu/15/

Update: Thanks for flagging this as duplicate but can you tell me where is the answer for the explaination of:

Why is that input - text wider but input - submit not?

Also I would like to say that I need it to work in IE8, don't ask me why...

In my whole code all the divs I have have some kind of meaning so if you feel like they are useless, they aren't!

Similar question http://stackoverflow.com/questions/628500/can-i-stop-100-width-text-boxes-from-extending-beyond-their-containers — Kevin Main, Aug 27 '13 at 13:35
The textbox is longer because the browser adds a default padding and border. — otinanai, Aug 27 '13 at 13:41

Ahmed Alaa El-Din · Accepted Answer · 2013-08-27T14:12:03.103

4

you can add

box-sizing:border-box;

to #but, #text inside your css and it will work fine

#but, #text
{
    display:inline-block;   
    width: 100%; 
    box-sizing:border-box;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
}

jsFiddle : http://jsfiddle.net/xXVHu/20/

edited Aug 27 '13 at 14:12

answered Aug 27 '13 at 14:00

Ahmed Alaa El-Din

1,813
1
16
19

Hmm, dunno why but your fiddle is showing the same result as mine - textbox still wider :( – Ms. Nobody Aug 27 '13 at 14:03
that's how my jsFiddle appear when i open the given link,isn't that the required? – Ahmed Alaa El-Din Aug 27 '13 at 14:05
What browser is it in? – Ms. Nobody Aug 27 '13 at 14:06
i added 2 more lines to css : try this jsfiddle link: http://jsfiddle.net/xXVHu/20/ – Ahmed Alaa El-Din Aug 27 '13 at 14:10
I think you wanted to put the 20th version of the fiddle not the 19th, the 20th is working ok. TY – Ms. Nobody Aug 27 '13 at 14:11

score 1 · Answer 2 · answered Aug 27 '13 at 13:57

1

Try to apply box-sizing. This property will take into account borders and padding when computing the length of the element. http://css-tricks.com/box-sizing/

answered Aug 27 '13 at 13:57

Frisbetarian-Support Palestine

1,277
1
12
27

Textbox/input text element longer than it should be

2 Answers2