Moving Beyond Tables…. Understanding the DIV Part 3
As I’ve stated in my previous posts, I learned to design using tables (for layout) and am trying to learn how to design using DIVs. This is a basic structure concept that I still have difficulty understanding.
The beauty of using a table is you can put whatever content you want into a grid and move the columns/rows (handles) to place it where you want. See Figure 1. If I want more space between a photo and the h1 tag, I can just move the handle (or add more rows/columns). I want to learn how to do this efficiently using DIV tags….
I still get confused with how divs can have (content) which resides next to another div (sidebar), which also resides within another div (middle), which appears vertically in-between two other divs (header/footer), and then everything resides within another div (container) which centers the whole website. I still don’t grasp how the height width of one div affects the up down perspective of the next div, and why it changes so drastically with one little hiccup.....I’m pretty sure this has to do with margins/padding/centering/left justified, but I get confused on how it all works….
So my question….
I have a long list of code which basically consists of a H1 tag (Staff), their photo (img), a H2 tag (their title), their bio (<p> tag), and a beautiful gap between the next employee... and then everything repeats. I want it to look pretty much like it does in Figure 2 (with everything centered). I understand it will appear within other divs.
Thanks to anyone who can simplify this all for me…. 
Here is my code in Table Form.,…..
<h1>Private Lesson Coaching Staff</h1>
</td>
</tr>
<tr>
<td height="148">
<p class="center"><img align="bottom" alt="Kevin Franchini" height="148" src="images/testpage_0clip_image002.gif" width="139" /></p>
</td>
</tr>
<tr>
<td>
<h3>Kevin Franchini, Skating Director, Coach</h3>
<p class="text1"><strong>Teaching Specialties: </strong>Freestyle and Moves in the Field: Basic Skills through Senior and Adult Pre-Bronze through Gold; Ice Dance: Preliminary through Silver; Choreography; and Hockey. All ages.<br />
<strong>Coaching/Personal Skating Experience: </strong>Kevin is a long-time member of both the United States Figure Skating Association and the Professional Skaters Association. He started teaching private lessons in 1978 and has been taking his skaters to area competitions, including Regionals and Adult Nationals, ever since. Kevin started skating in Albuquerque in 1965 at the age of 12. He has trained in Albuquerque, Tulsa, Aspen, Denver, and Lake Placid. He was training at Lake Placid at the same time as Dorothy Hamill. Kevin has passed his Junior Freestyle test, 7th figure test, and Silver Ice Dance test. He has competed at Regionals as an Intermediate, Novice, and Junior and at Sectionals as an Intermediate. His coaches included Carlo Fassi, Tim Wood, and Tommy Litz.</p>
<p class="text1"> </p>
</td>
</tr>
<tr>
<td height="148">
<p class="center"><img align="bottom" alt="" height="148" src="images/testpage_0clip_image004.gif" width="133" /></p>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<h3>Ian Ballinger, Coach</h3>
<p class="text1"><strong>Teaching Specialties</strong>: Hockey and Power Skating. All ages.<br />
<strong>Coaching/Personal Skating Experience</strong>:Ian has played hockey for 20 years, playing competitively through high school and college. He has been a hockey instructor since 2007, teaching power skating, beginning hockey, hockey skills clinics, and private lessons.</p>
AdChoices