The "curve" images are floated left allowing the text to flow around the right side of the images. Eric has set a margin on the images right side of 1 em to keep the text slightly away from the images borders. Eric points out that the H1 background and border are sliding under the floated images. That is due to the rules of floats "When a block box overlaps, the background and borders of the block box are rendered behind the float and are only be visible where the box is transparent. The content of the block box is rendered in front of the float. ".
<div style="border: 1px dotted red;"> <img src="pic1.gif" style="float: left; margin-right: 0.66em;"> My little red wagon. </div>
My little red wagon.
Padding. In the example above I added padding:1% as such:
<div style="border: 1px dotted red; padding:1%">
Assuming the following document skeleton, what styles would place the "sidebar" and image as they are shown?
<body> <div id="sidebar"> ... <img src="blah.gif"> ... </div> ... </body>I made the sidebar style as this:
float: right; width:20%; border:thin black solid; padding:1%; margin-top:15px; margin-left:25px; and the image style as this: float:left; margin-left:-25px;
A float can overlap other boxes in the normal flow (e.g., when a normal flow box next to a float has negative margins). When an inline box overlaps with a float, the content, background, and borders of the inline box are rendered in front of the float.
A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property). Content flows down the right side of a left-floated box and down the left side of a right-floated box. The following is an introduction to float positioning and content flow; the exact rules governing float behavior are given in the description of the 'float' property.
A floated box must have an explicit width (assigned via the 'width' property, or its intrinsic width in the case of replaced elements). Any floated box becomes a block box that is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. The top of the floated box is aligned with the top of the current line box (or bottom of the preceding block box if no line box exists). If there isn't enough horizontal room on the current line for the float, it is shifted downward, line by line, until a line has room for it.
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.
<body> <div id="nav">...</div> <div id="main">...</div> <div id="pictures">...</div> <div id="footer">...</div> </body>Write rules that will result in the following layout using
float for some or all of the div elements shown in the skeleton without rearranging them. Use whatever widths seem appropriate to you.
For the ID nav I used the style:
border:thin black solid; width:22%; height:80px; margin-bottom:5px; text-align:center; text-align:center;;For the ID main I used:
border:thin black solid; float:right; width:75%; height:250px; margin-bottom:5px; margin-top:-85px; text-align:center;;for the ID pictures I used:
border:thin black solid; width:22%; height:80px; text-align:center;and for the ID footer I used:
clear:both; border:thin black solid; text-align:center;.