Even with the help from the links above I still found myself in kind of a muddle until I very carefully roughed out a model with a lot of comments. I am going to include the complete code below in the event that it might be of use to someone who finds their way to this thread.
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1.3">
<title>My Page Without tables</title>
<style>
/* css items that start with (#) are for unique page elements (that start with "id="). The ones that start with (.) are for classes, ("class=") and can be used over and over */
body {
font-family:arial,helvetica,sans-serif;
font-size:10px;
}
#wrapper {
width:900px;
margin:0px auto;
border:1px solid #000000; /*black*/
padding:5px;
}
#header {
border:1px solid #5964C6; /*blue*/
text-align:center;
}
#content { /*I want everything within content to float over to the top/left side, but not overlap with other elements*/
float:left;
}
.content div { }/*not exactly sure why/if this is needed*/
#content-menu {
width:100px;
/*border:1px solid #000000;*/ /*black*/
border:1px solid #FF050D; /*red*/
text-align:center;
float:left;
}
#content-rowcontainer { /*to contain all content "rows"*/
width:790px;
/*border:1px solid #000000;*/ /*black*/
}
.content-row { /*an individual row: there can be many (a class)*/
width:788px;
border:1px solid #2A7F2B; /*green*/
}
.content-picture_box {
/*width:100px;*/
border:1px solid #000000;
height:50px;
float:left;
}
.content-bigtext_box {
width:400px;
border:1px solid #000000;
font-size:12px; /*larger text than the rest of page*/
float:left;
}
.content-wide_box {
width:400px;
border:1px solid #F98500; /*orange*/
float:left;
}
#footer {
margin-top:10px;
margin-bottom:10px;
padding:10px;
border:1px solid #000000;
width:878px;
}
#bottom {
clear:both;
text-align:right;
}
</style> <!---using../css/_notables.css"--->
</head>
<body>
<div id="wrapper"><!--wrapper wraps around whole page used here as a container of other divs: there is no text or image content...until you get into some of the contained divs-->
<div id="header"><h1>my page header (a wide line outside of the content div)</h1></div>
<div id="content"><!--content used here as a container WITHIN the wrapper container it does not have any content until you get into the divs contained within -->
<div id="content-menu">content-menu<br />button1<br />button2<br />button3<br />button4<br />...</div><!--end menu div-->
<div id="content-rowcontainer"><!--content-rowcontainer this is a container with no text or images that wraps around all DATA ROWS: it keeps them all lined up, outside of the menu box (which is on the left)-->
<div class="content-row">content-row: display something special</div><!--end of content-row1-->
<!--BEGIN PROCESS OF CYCLING THROUGH RECORDS-->
<!--(this could by done a foreach, or sql while fetchrow cycle rather than coding individual rows, obviously)-->
<div class="content-row">content-row: this could be a title referring to the contents of all the boxes in this row
<div class="content-picture_box">content-picture_box:picture?</div><!--end of content-picture_box-->
<div class="content-bigtext_box">content-bigtext_box:text</div><!--end of content-bigtext_box-->
<div class="content-wide_box">content-wide_box:other text</div><!--end of content-wide_box-->
</div><!--end of content-row1-->
<div class="content-row">(another) content-row: this could be a title referring to the contents of all the boxes in this row
<div class="content-picture_box">content-picture_box:picture?</div><!--end of content-picture_box-->
<div class="content-bigtext_box">content-bigtext_box:text</div><!--end of content-bigtext_box-->
<div class="content-wide_box">content-wide_box:other text</div><!--end of content-wide_box-->
</div><!--end of content-row2-->
<div class="content-row">(another) content-row: this could be a title referring to the contents of all the boxes in this row
<div class="content-picture_box">content-picture_box:picture?</div><!--end of content-picture_box-->
<div class="content-bigtext_box">content-bigtext_box:text</div><!--end of content-bigtext_box-->
<div class="content-wide_box">content-wide_box:other text</div><!--end of content-wide_box-->
</div><!--end of content-row3-->
<div class="content-row">(another) content-row: this could be a title referring to the contents of all the boxes in this row
<div class="content-picture_box">content-picture_box:picture?</div><!--end of content-picture_box-->
<div class="content-bigtext_box">content-bigtext_box:text</div><!--end of content-bigtext_box-->
<div class="content-wide_box">content-wide_box:other text</div><!--end of content-wide_box-->
</div><!--end of content-row4-->
<!--END PROCESS OF CYCLING THROUGH RECORDS-->
</div><!--end content-rowcontainer-->
</div><!--end content div-->
<div id="footer">my page footer(a wide line outside of the content div)</div>
</div><!--end wrapper div-->
</body></html>
