Thanks to some help from Paul (see Aug.26, "layout help, please") the first pass at this two column layout was progressing nicely; then I began to fiddle ...
I'm trying in insert a set of three small divs into the main content div, but so far I can't get them in line horizontally as I want them.
I have read Paul's Aug.23 post under the heading "Divs next to each other", but don't seem to be able to extrapolate the advice there into my situation.
Here is the HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--meta tags to come -->
<title>Floraworld.ca Trial Run -- Occasions Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="anniv_expand3-style.css"/>
<h2>Send Anniversary Flowers in Canada</h2>
<h3>Order Online from FloraWorld</h3>
<h4>Have your Anniversary Flowers Delivered by Floraworld</h4>
<img id="flowers" src="images/covermain.jpg" alt="flowers delivered" />
<p>When you can't make a personal delivery, trust western Canada's home-grown floral delivery service to make it right!
Working with the best local flower shops(FTD, Teleflora and Grower Direct),</p>
<p>easy, secure online ordering</p>
<p>fast, reliable floral delivery (same day delivery on early orders)</p>
<p>Aeroplan Miles with every order (or CAA Discount blah, blah)</p>
<p>the freshest roses and other cut flowers in exquisite bouquets and arrangements.</p>
<li><a href="link19.html">All Other Canadian Locations</a></li>
<h2>U.S.A. Flower Delivery</h2>
<h3>Popular Places to Send Flowers in the United States</h3>
<h2>International Flower Delivery</h2>
<h3>Popular Places to Send Flowers around the World</h3>
<h2>Popular Flower Varieties for Delivery in Canada</h2>
<p>Carnations, Chrysanthemums, Daffodils, Tulips, Roses, etc</p>
<p>(List is not complete, and these are not links to pages)</p>
<p>(Perhaps this list should go into the left hand column,</p>
<p>which -- through some CSS sleight of hand -- will appear after the wider</p>
<p>main column in the source code, thus moving the keywords up still higher)</p>
The images going into the three divs in question will not always be the same width and height, but they will always be less than 125 px, so there should be room for three of them.
The related question: how do I achieve even spacing of those three divs?
While I'm at it: if I want to put more information into the left nav column
(maybe even using it for the 3 product samples) should I be looking at creation of a "nav-container" div with all the characteristics of the current "nav" div, and containing, say, nav1, nav2, nav3, etc?
And if so, what constraints will automatically apply to those last-named divs because of the styles applied in the "nav-container"?
This brings to mind a general malaise which other less-than-experts may suffer along with me...
Much of CSS seems to be about the behavior of boxes within boxes. Despite having studied the box rule numerous times, and having read the rules for "floating" and "absolute", "relative" and other positions, I still find myself uncertain about the consequences of styling decisions.
A few examples:
If I use relative positioning for a DIV which is one level down from the <body> tag, what possibilities have I created/eliminated for the next level in? What flexibility have I gained/lost vis. styling in sibling and descendant boxes?
I know that the answers are there somewhere in the broad CSS-2 spec, but can anyone steer me to something which addresses concerns like this more exclusively and directly? This strikes me as classic database fodder; a series of "if", "then", "and", "or" propositions tht could be laid out neatly in bite-sized chunks for the memory-challenged.
Thanks from a neophyte who would really like to be less bothersome