100% Width Div's And Form Elements + Padding?

What do I have to do to prevent the following from stretching more than 100%? It obviously stretches to 100% then adds on the padding... Thanks!

Solution 1:

Your width:100% on the div is altogether unnecessary. Div's are block level elements which automatically expand to 100% of their container. Remove the width:100% from your div declaration and the padding will be contained within the parent container, no scrolling or extended width.

DON'T use a negative margin, that's just adding a hack to achieve something simple.

You can use this rule in general: You almost never have to put width:100% on a div (I can't think off the top of my head why you would unless it was displayed inline or something) because as mentioned above, block level elements always expand to 100% of their container

edit: that was dumb to suggest setting width 100% on a div displayed inline as you can't set the dimensions on an inline element

Solution 2:

Create a new form rule and move the padding: 20px; declaration to it.

#box {
    width: 100%;
    border: 1px solid #000;
}

form {
    padding: 20px;
}

Share