Very Nice Site Masthead

Content div

Sometimes the images or the captions are not all the same height. Here is one way to accomodate that uncertainty.

  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy with a hot air balloon
  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy
  • playground toy with hot air balloonPlayground Toy

Increasing the height declaration for the li from height: auto (example 12) to height: 11em here, provided plenty of room for additional caption text and kept the thumbnails neatly aligned.

The list items are styled with the following rule:

#thumb li {
float: left;
display: inline;
font-size: small;
text-align: center;
margin: 2px;
padding: 2px;
height: 11em;
width: 75px;
border-top: 1px solid #666;
border-right: 2px solid #666;
border-bottom: 2px solid #666;
border-left: 1px solid #666;}

Inner Sidebar

  • link
  • link
  • link
  • link

Stuff and Things

The inner sidebar uses this rule:

#innersidebar {
float: left;
width: 35%;
}