Putting the white boxes inside of titleWrap with padding:5px

HTML & CSS
1

#titleWrap has the code below

#titleWrap {
margin:0 1px;
border:1px solid #555;
background:#ffff88;
text-align:center;
[COLOR="#FF0000"]padding:5px[/COLOR];
}

I like to make the result of it at http://dot.kr/x-test/layOut/12/ that the white boxes of sosthers and kids are inside the yellow box (#titleWrap) which has the code padding:5px.

But the actual result of it is that the both bottom lines of the white box(sosthers) and the other white box (kids) are outside of the yellow box (#titleWrap).

How can I put the the full white boxes including the bottom lines of them to inside of the yellow box(#titleWrap)?

If I add height:30px to #titleWrap, I can put the full white boxes to inside of the yellow box(#titleWrap) .

With the code height:30px, it’s okay at http://dot.kr/x-test/layOut/13/ when the title is short, but it has the problem at http://dot.kr/x-test/layOut/14/ that some of the title text is outside of the yellow box(#titleWrap) when the title is very long.

2

You need to contain the floats, otherwise content will spill out.

#titleWrap {
margin:0 1px;
border:1px solid #555;
background:#ffff88;
text-align:center;
padding:5px;
overflow:hidden;
}
3

Thank you very much, kohoutek.