Multiple Box Layout using two-columns

All of these blocks is contained inside the div id="content" (green border). Each of these blocks has the attribute class="summary" (blue border). The overflow property is set to auto. This will display a set of scroll bars (either vertical or horizontal or both) if the text goes beyond the height of the block.

 

 

 

Here's the CSS code for class="summary"

.summary {
  background-color: #FFFFFF;       
  border:           3px solid blue; 
  padding:          5px;
  height:           160px; /* height of highest image */ 
  overflow:         auto;  /* if the page width narrows, add scroll bars */  
}				
				

Styling blocks inside of classes

Two blocks are used inside of the class="summary".
The graphic class and the p element.
The graphic class is included as part of the <img /> element. Like this:

<img src="graphic/thumbprint.jpg" class="graphic" alt="thumbprint" />

Here is the CSS code showing how each of these is styled:

.summary .graphic {
	border:                   3px solid purple;
	float:                    left;
   width:                    100px;
}
.summary p{
	border:                   3px solid gold;
	margin:                   0px;
}

Note the dot in front of the graphic. This designates it as a class of the summary class. If you left the dot off this style would not affect the graphics in the summary.

The key attributes with this code is the float: left with the .graphic. This allows the text to come up on the right of the graphic. In order for this to work properly, the browser has to know how wide the block is, so always include the width: attribute whenever designating float. (Think of float: left as telling the browser that the graphic can float to the left of everything else in the block.)

This shows how the scroll bars disappear if the text is within the height tolerance of the block.