Some information is best presented, visually, as a sidebar. Rather than presented sequentially, items can be “detached” from their location on the page and “floated off” elsewhere. The easiest way to do this is with the float property. Elements can be floated to the right or the left.
The table of information about our book would make a great sidebar. Let’s float that off to the right and let text wrap around it on its left. The table of book information already has a special class, “bookinfo”, so that we can apply styles to this kind of table without accidentally applying it to other tables that might show up in our book reviews.
table.bookinfo {
float: right;
border-style: solid;
border-width: .15em;
border-color: orange;
margin: 0;
margin-left: 1em;
margin-bottom: .1em;
}
We told the web browser to float any table with the class “bookinfo” off to the right, give it a solid orange border, and a margin only on its left and bottom.
Related Pages
