Floating causes child div goes outside parent div

Below is shorten of my actual code. I try to keep the children div inside its parent div. It works in ie but goes lefty and not working in the others.
What causes this and how to solve.

			.width {
				width: 960px;
				margin: 0 auto;
				border: 1px solid #000;
			.left { float: left; }
			.right { float: right; }
			<div class="width">
				<div class="left">
					Lest Side
				<div class="right">
					Right Side

Thank you,


Floats are removed from the flow which means that a parent element that contains only floats will in fact contain nothing and its height will be zero.

You need to contain the floats which is usually accomplished by using a containing mechanism on the parent (such as overflow:hidden) or adding an element after the float and applying clear:both to it (see clearfix).

If you don’t need visible overflow then just apply overflow:hidden to .width.


(‘width’ is a bad naming convention and wrapper,outer or container would be better.)

(You should also use a full doctype to stop triggering quirks mode and upsetting the standard behaviour. All pages should have a current valid doctype).

Thank you. It works, and thanks for additional suggestions.