Div Height is not correct when overflow is not set

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...

Answer 2

Try this http://jsfiddle.net/SCYVN/6/

.optionLine
{
    display: table;
    border: 1px solid blue;
    /*overflow:auto;*/
    width:100%;
}

Answer 3

Because your items (inside the container) are floated. Floated items are outside of the normal flow of the document; you need to clear their floats (either by using overflow: auto on the container, or adding another element which has clear: left or clear: both specified) to snap the document's flow back.

Answer 4

Drop the float:left; on .optionItem and it will be fixed. If you don't want to do this, you have to add a wrapper between (For each row of floated items) and after your floated items with clear: both; ...

But adding overflow: auto; is always the best way.

Answer 5

You Need to set width and height for outline div

Ex:

border: blue 1px solid;
width:500px;
height:50px;