A div inside another div can be useful

Sometimes it can be useful to use a div inside another div. Suppose you have a liquid layout with 2 columns, each containing 2 divs on top of each other:

1 2
3 4

Now you like div number 1 and three to have borders on the right side that are exactly in line with each other vertically. Let’s further assume you both gave them a width of 25%. So far, everything is easy. But now comes the difficult part: in div number 1 you would like to use a padding of 5px, while in div number 3 you won’t use padding. The result will be that the right border of div number 1 will be 25%+10px (or 25%+2×5px) from the left, while the border of div number 3 will be 25% from the left.

It would be easy if we could set in your stylesheet “width: 25%+10px” or something like that. But there’s a nice solution we can use for these kind of situations. If you position another div inside div number 1, you can use the padding on that div instead. Div number 1 will have a width of 25%, and the div inside will take that width and work with the padding you assign (to that inside div) in that room.