Floating causes child div goes outside parent div

HTML & CSS
1

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.


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

Thank you,

2

Hi,

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{overflow:hidden}

(‘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).

3

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