Simple float clearing in Mozilla
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer,#outer2 {
width: 500px;
background: #ccc;
border: 1px solid #000;
}
.inner,.inner2 {
width: 300px;
background: #aaa;
border: 5px solid blue;
padding: 5px 0;
overflow: hidden;
margin: 5px;
}
img {
float: left;
margin: 5px;
border: 1px solid #000
}
</style>
</head>
<body>
<div id="outer">
<div class="inner"> <img src="http://www.java2s.com/style/logo.png" width="100" height="67" />
<p>Some descriptive text</p>
</div>
</div>
</body>
</html>
Related examples in the same category
1. | Box Dimensions | | |
2. | Box Model defines properties of: display, width, height, padding, border, margin, background, overflow, and visibility. | | |
3. | Spacing: indentation, margins, padding, letter spacing, word spacing, text justification, and line spacing | | |
4. | Box Model Basics | | |
5. | Understanding the Box Model | | |
6. | The margin Properties | | |
7. | The Padding Properties | | |
8. | Box model for child and parent relationship | | |
9. | Inner box | | |
10. | Inner box with DIV | | |
11. | Inner box padding and border | | |
12. | Left text alignment for inner box | | |
13. | Box model with div | | |
14. | Width setting | | |
15. | block multiline inline box model with margin and padding | | |
16. | Float left in a container | | |
17. | Float inside | | |
18. | Setting box dimensions and aligning text | | |
19. | Floating elements and element boxes | | |
20. | Setting borders of an element | | |
21. | Block Box | | |
22. | Table Box | | |
23. | border and padding shrink the inner box of stretched absolute boxes. | | |
24. | A percentage of the height of its container. | | |
25. | A percentage of the width of its container. | | |
26. | auto is the default value for width and height. | | |
27. | Style sheet for boxModel illustration | | |