HTML and CSS Reference
In-Depth Information
<li>Registered: 8/22/2010</li>
<li>Total Posts: 823742</li>
<li>Website: <a href="http://example.com/" class="url">
➥
example.com</a></li>
</ul>
</div>
Juggling the gutters created by element margins and using the
float
property is at the core of most CSS-based layouts. Although absolute
positioning of columns or content items (as was done with the profile
photo in the previous example) may seem like the most direct way of
placing content side by side, removing content from the document flow
or creating new containing blocks can have unwanted side effects.
Instead, floated elements can be moved into gutters created by wide
margins on column elements or other content. This layout technique is
the basis for the following code, which created
Figure 7.2
.
Figure 7.2
A small
content block is
positioning in the
gutter of a larger
element using
floats.
.container {
padding: 5px;
border: 1px solid black;
}
