Background not visible due to positioning

The background color of <ol> list is not displayed properly. This problem started after I floated label开发者_如何学Go 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>.

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

Check it out here.

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

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.

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.