ansaurus

Question

100% Width div's and form elements + padding?

Answer 1

A:

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

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

form {
    padding: 20px;
}

melhosseiny 2010-07-08 19:06:10

Answer 2

+3 A:

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

brad 2010-07-08 19:11:30

ansaurus

tags:

views:

answers:

100% Width div's and form elements + padding?

related questions