Folks, this is such a disaster I gave up and made a graphic of the desired output, below. This is part of my Library project, and will sit on top of the other content. I’m trying to go tableless and it’s been awhile since I did FLOATS. Some of this I got from ronpat (thanks buddy), and Paul I have tidied it so if you don’t like it, it isn’t my fault! 
##Float Within a Float###
4 containers span the width of the page (using the body margins). The 4 containers will have a border and 30px between them. Note, I’ve given the container columns a width of 20% as temporary placeholders. In each of these containers are going to be the library hours of 4 libraries in three columns. The center most column I’m displaying as blue lines are seven ndash characters, as in
9:30 AM – 5:00 PM
for the 7 days of the week. Obviously that center column does not have left & right borders, this is just for the layout. The columns appearing to the left of their ndash will be text-align: right;
I was trying to make the class .FOCUS the inner float (the 9:30 AM – 5:00 PM bit). Oh yes and I just added a header to each of them, which is new so I’ve updated the graphic. Thank you for your help friends.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<meta content="text/html charset=UTF-8 http-equiv=Content-Type" />
<title>LIBRARY HOURS ● 2018-03-30</title>
<style type="text/css">
/*<![CDATA[*/
*, *:before, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a:link {color: #6AB343;} */ LIGHT GREEN
a:visited {color: #018A00;} */ DARK GREEN
a:hover {color: TEAL;}
a:active {color: BLACK;}
.BLINKS
a:link {color: #006ED5;}
a:visited {color: #006ED5;}
a:hover {color: BLUE;}
a:active {color: BLUE;}
P {margin-TOP: 0px;
margin-BOTTOM: 0px;
margin-LEFT: 0px;
margin-RIGHT: 0px;
}
H1 {margin: 0px 0 10px 0;}
H2 {margin: 0px 0 10px 0;}
H3 {margin: 0px 0 5px 0;}
H4 {margin: 0px 0 0px 0;}
H5 {margin: 0px 0 0px 0;}
thead {
background: #6AB343;
border-bottom: 6px solid #000000; */ Defining the header's background and border(s) */
padding: 10px;
}
thead th { */ Defining the HEADER'S FONT properties */
color: #018A00;
border: 1px solid BLACK;
padding: 10px; /* padding is the CSS equivalent of TABLE cellpadding */
font-family: PRESTIGE12 BT, MONOSPACE;
font-size: 18px;
line-height: 18px;
font-weight: bold;
text-align: left;
}
td, th {
padding-left: 8px;
padding-right: 8px;
padding-top: 1px;
padding-bottom: 1px;
}
BODY {font-family: PRESTIGE12 BT, MONOSPACE;
font-size: 18px;
line-height: 18px;
text-align: LEFT;
margin-left: 30px;
margin-right: 30px;
margin-top: 30px;
width: AUTO;
overflow: hidden;
}
.colm1, .colm2, .colm3, .colm4 {
padding: 10px 1%;
border-right: 2px DOTTED #018A00;
}
.colm1 {
float: LEFT;
color: #000000;
width: 20%;
text-align: LEFT;
}
.colm2 {
float: LEFT;
color: #000000;
width: 20%;
text-align: LEFT;
}
.colm3 {
float: LEFT;
color: #000000;
width: 20%;
text-align: LEFT;
}
.colm4 {
float: RIGHT;
color: #000000;
width: 20%;
text-align: LEFT;
}
.FOCUS {
text-align: LEFT;
float: left;
width: 10%;}
}
/*]]>*/
</style>
</head>
<body>
<div class="colm1">
<div class="FOCUS">
<div>
OPEN
</div>
<div>
& –
</div>
<div>
CLOSE
</div>
</div>
<div class="colm2">
<div class="FOCUS">
<div>
OPEN
</div>
<div>
& –
</div>
<div>
CLOSE
</div>
</div>
<div class="colm3">
<div class="FOCUS">
<div>
OPEN
</div>
<div>
& –
</div>
<div>
CLOSE
</div>
</div>
<div class="colm4">
<div class="FOCUS">
<div>
OPEN
</div>
<div>
& –
</div>
<div>
CLOSE
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
