Very Nice Site Masthead

Content div

The image and caption are list items.

  • 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
  • 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

The images form rows and columns based on the width of the browser window. Try resizing your browser and watch what happens. (This paragraph has a clear:left rule applied to bring it down below the floated images above it.)

The unordered list used to create the thumbnail gallery was assigned an id called thumb, which uses this rule:

#thumb {
list-style: none;
margin: 0px;}

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: auto;
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%;
}