Question

I am creating a simple 2 column layout for a website, but have struck a bit of a problem. When I add padding to the column which has float:left applied, the float expands past the width I have defined. I can’t seem to find an answer for this anywhere.

Answer 1

You have to adjust the width, because when your page is rendered padding is considered as part of the width.

Say you have a div that should be 200px, with a rightward padding of 10px.

.box {
    width:200px;
    padding-right:10px;
}

Your actual width will be 210px.