Background not visible due to positioning

Question

The background color of <ol> list is not displayed properly. This problem started after I floated label left and input right. How to fix this. The expected result is:

Here is my result: http://fiddle.jshell.net/WZ3nM/1/

Similarly I've problem with the div .wrapper. The shadow should be way below the content and there should be a white color background beneath <div class=.col-2>.

Answer 1

As others have suggested you can clear the floated content - although this will add another element. You can also add

li{overflow:auto;}

which will prevent the list from collapsing. In IE6 you will also need the rule

li{height:1px;}

http://fiddle.jshell.net/WZ3nM/9/. This method does not require a clearing element.

Answer 2

I modified your code and added a third <li> with the following style:

clear:both;

Your float was taking elements out of the document flow and this the background color didn't know where to end.

Hope that helps.

Answer 3

http://fiddle.jshell.net/WZ3nM/5/

Whenever you float things you must clear them at the end so that it can calculate the height properly

Answer 4

You need to clear the float, before you close your <ol>

Check it out here.