1

I've inserted an <input type=text /> to the .searchbox div, but it's overflowing out of the body from the right because of the padding. How can I fix this?

.searchbox {
    width: 100%;
    height: 40px; 
    background-color:#0099FF;
    padding-left: 20px;
    padding-right: 20px;
}
.inputb {
    width: 100%;
}
@media (max-width: 490px) {
   .searchbox {
        padding-left: 5px;
        padding-right: 5px;
    }
}

HTML:

<div class="searchbox">
    <input class="inputb" type="text" />
</div>

http://jsfiddle.net/brendan34/yLH7L/4/

bjb568
  • 11,089
  • 11
  • 50
  • 71
brendan
  • 19
  • 2
  • 8

6 Answers6

3

Add box-sizing: border-box. It makes width be computed for the border-box, instead of the content-box. Fiddle. It's support is good enough, and forcing old browsers into quirks mode will make all elements render as border-box. (It's a good idea to give old browsers very minimal CSS, anyway. If you do that, quirks mode shouldn't break much)

.searchbox {
    box-sizing: border-box;
    width: 100%;
    height: 40px; 
    background-color:#0099FF;
    padding-left: 20px;
    padding-right: 20px;
}
bjb568
  • 11,089
  • 11
  • 50
  • 71
2

you can use calc function in css. chek this http://jsfiddle.net/yLH7L/6/

Arjun
  • 1,431
  • 1
  • 12
  • 32
  • updated your [JSFiddle](http://jsfiddle.net/yLH7L/6/) to work with the 490px media size... just because i was bored – Vladimir Rosca Feb 13 '14 at 06:36
  • @VladimirRosca you forgot the width, [JSFiddle](http://jsfiddle.net/yLH7L/8/) am I bored too? :D – Adrian Enriquez Feb 13 '14 at 06:40
  • 1
    @Adrian Enriquez Funny story. The ONLY eidt i made was to add the width but it would seem i copied the wrong URL... so my comment is useless. my fiddle _was_ going to look exactly like yours – Vladimir Rosca Feb 13 '14 at 06:43
  • 1
    @Arjun also +1 for teaching me about the calc function. didn't even know that was a thing. thanks – Vladimir Rosca Feb 13 '14 at 06:44
  • that is because default padding of textbox so you have to remove default padding of textbox. – Arjun Feb 13 '14 at 06:46
1

Add box-sizing:border-box; to your code and ready only works in recent browsers is css3

 .searchbox {
            width: 100%;
            height: 40px; 
            background-color:#0099FF;
            padding-left: 20px;
            padding-right: 20px;
            box-sizing:border-box; --- take look a this
        }

if you need full cross browser solution take a look at CSS Div width percentage and padding without breaking layout

complete explanation of box-sizing http://css-tricks.com/box-sizing/

Community
  • 1
  • 1
ncubica
  • 8,169
  • 9
  • 54
  • 72
0

Try this. It uses percentage sizes.

.searchbox {
    width: 100%;
    height: 40px; 
    background-color:#0099FF;
    padding-left: 2%;
    padding-right: 2%;
}
.inputb {
    width: 98%;
 }
@media (max-width: 490px) {
    .searchbox {
        padding-left: 1%;
        padding-right: 1%;
    }
}
Vladimir Rosca
  • 377
  • 1
  • 2
  • 15
0

Try this

.searchbox {
    width: 96%;
    height: 40px;
    background-color:#0099FF;
    padding: 0 2%;
}
.inputb {
    width: 100%;
    margin:0;
    padding:0;
}
@media (max-width: 490px) {
    .searchbox {
        width:94%;
        padding-left: 3%;
        padding-right:3%;
    }
}
user3242956
  • 71
  • 5
0

Use a <div> with negative margins

For any child element, the maximum natural width cannot exceed that of the parent's content width — even if the parent has box-sizing: border-box defined.

On typical block-level elements and most elements defined with display: block, you can stretch the child by giving it negative margins equivalent to the padding of the parent container.

This only works if the element has no defined width or it has width: auto explicitly defined. Defining width: 100% is insufficient.

For some reason there is no way to accomplish this directly on an input even if you have defined display: block (this applies to textarea and possibly other form elements as well).

I suspect this is because width: auto defers to the element's default browser-defined width which is calculated uniquely for input elements.

You can, however nest the input within a container that has no padding of its own to which you've also applied the negative margins.

Consider the following examples:

* { box-sizing: border-box } /* FTW */
h2 {
    margin: 0;
    padding: 0;
    line-height: 1;
}
.myuncoolparentdiv {
    position: relative;
    margin: 10px;
    padding: 10px 20px;
    background-color:#0099FF;
}
.mycoolparentdiv {
    margin: 0 -20px;
}
.mybadinputtoo {
    display: block;
    width: 100%;
    margin: 0 -20px;
}
.myreluctantinput {
    display: block;
    position: absolute;
    width: 100%;
    right: 0;
    left: 0;
}
.mycoolinput {
    width: 100%;
}
.mycooldiv {
    margin: 0 -20px;
    padding: 3px;
    background-color: tomato;
    border: 1px solid gold;
}
.mybaddiv {
    width: 100%;
    margin: 0 -20px;
    padding: 3px;
    background-color: tomato;
    border: 1px solid gold;
}
<div class="myuncoolparentdiv">
    <div class="mybaddiv">
        My Bad Div has width: 100%;
    </div>
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <div class="mycooldiv">
        My Cool Div has no defined width (~ width: auto;)
    </div>
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <input class="mybadinput" type="text" value="My Bad Input has width: auto;" />
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <input class="mybadinputtoo" type="text" value="My Bad Input has width: 100%;" />
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <input class="myreluctantinput" type="text" value="My Reluctant Input has position: absolute;" />
    <h2>Other Content</h2>
</div>

<div class="myuncoolparentdiv">
    <div class="mycoolparentdiv">
        <input class="mycoolinput" type="text" value="My Cool Input has width: 100% and a cool parent div" />
    </div>
    <h2>Other Content</h2>
</div>
gfullam
  • 11,531
  • 5
  • 50
  • 64