Currently facing two issues, with the second one dependent on the resolution of the first. Everything was functioning correctly and looking fine until I came in to work on it today, only to find that the page is now broken. Interestingly enough, I am using the same browser at both locations.
The main problem seems to be related to the background of a specific div not extending to the bottom as expected, unlike the other divs on the page which are set to auto height. Here's an image for reference: https://i.sstatic.net/Y3iXu.png
<div class="items">
<h2><a name="friday"><a href="#">Friday catch of the day:</a></a></h2>
<img src="images/catch.png" align="right" alt="Sage-rubbed Double-cut Pork Chop" />
<p><span class="title">Alaskan Halibut with a Rich Loire Valley Beurre Blanc Sauce</span> - served with mashed purple Peruvian potatoes and haricot verts.</p>
<p><span class="title">Recommended pairing:</span> '98 Passi Emilio Vineyards Sauvignon Blanc</p>
</div>CSS
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
}
.items img {
float: left;
margin-right: 10px;
float: right;
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
.items p {
font-family: 'PT Sans';
font-size: 16px;
}
.items a {
color: #FFFFFF;
text-decoration: none;
}