Question

I have HTML as shown in http://jsfiddle.net/Lijo/SCYVN/4/.

There is “optionLine” class with blue border. But the border is not working as expected when overflow is not set. It works fine when overflow is set.

1. Why is overflow mandatory in this scenario?

2. Any way to make it work without overflow?

CODE

.optionLine
{
display:block;
border: 1px solid blue;
/*overflow:auto;*/
}

Reference:

1. Parent Div does not adjust height when adding div dynamically

Answer 1

The border doesn’t work properly because the child elements of the element with the border are floated.

Floated elements need to be cleared for their container to have the correct, expected dimensions.

See here for clearfix information

This SO question also has some very detailed explanations and solutions for different situations. Recently I have used the display:table method frequently…