I have the following html:
<div class="rightnews">
<h3>Hours</h3>
<div class="boxL">
Monday<br />Tuesday<br />Wednesday<br />Thursday<br />Friday<br />Saturday<br />Sunday</div>
<div class="boxR">
9 am - 7 pm<br />9 am - 7 pm<br />9 am - 7 pm<br />9 am - 7 pm<br />9 am - 5 pm<br />9 am - 5 pm<br />Closed</div>
</div>
Essentially, I want to use two “boxes” to align text correctly for displaying the hours of business, with the days on the left and hours on the right. My problem, the main <div> class “rightnews” has a background color and border and when I view the page in the browser, the background color and border only surround the header statement,
Hours
. My other <div> are there, and aligned correctly, but can’t really be seen unless I highlight the text with my mouse.
Below is my css:
.rightnews {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
color: #FFFFFF;
margin: 0 0 5px 0;
padding: 10px 5px 5px 10px;
background: #B79B89;
border: dotted thin #00268E;
}
.boxL {
float: left;
text-align: left;
}
.boxR {
float: right;
text-align: left;
}
