I think my next big decision will be trying to figure out which mobile friendly DD menu will work best with my site.
Of course there's nothings against keeping the menu you already have, try this code:
<!doctype html>
<html >
<head>
<title>James438</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {font-family: verdana; font-size: 14px; padding: 1%; padding-left:5px; padding-top: 0; background: green; }
.responsive_div {display: table-cell; margin-bottom: 0; padding-right: 40px; vertical-align: top; min-width: 180px; }
img {width: 100%; max-width: 400px; min-width: 170px; display: block; margin: auto; margin-top: 20px; margin-bottom: 20px}
#middle {min-width: 70%; padding:0; border-radius: 0px}
#right {padding-left: 30px; min-width: 140px}
@media screen and (max-width: 899px)
{
.responsive_div {display: block; margin-bottom: 17px; padding: 35%; padding-top: 10px; padding-bottom: 10px}
img {width: 50%; max-width: 300px; min-width: 50px}
#right {padding-left: 0}
}
</style>
</head>
<body>
<img id="banner" src="http://www.animeviews.com/images/pops/iria4.jpg" alt="">
<div class="responsive_div" >
<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin-auto; ">
<span style="background: gray; color: white; width: 100%; display: block"> ▼ Site Navigation</span><br>
<a href="javascript: void(0)" style="color: black">Main</a><br>
<a href="javascript: void(0)" style="color: black">About</a><br>
<a href="javascript: void(0)" style="color: black">Search</a><br>
<a href="javascript: void(0)" style="color: black">Articles</a>
</div>
<br>
<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin: auto; ">
<span style="background: gray; color: white; width: 100%; display: block"> ▼ Anime + Manga</span><br>
<a href="javascript: void(0)" style="color: black">Anime Reviews</a><br>
<a href="javascript: void(0)" style="color: black">Anime Characters</a><br>
<a href="javascript: void(0)" style="color: black">Gallery</a><br>
<a href="javascript: void(0)" style="color: black">Screenshots</a><br>
<a href="javascript: void(0)" style="color: black">Manga Reviews</a>
</div>
<br>
<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin: auto">
<span style="background: gray; color: white; width: 100%; display: block"> ▼ Misc</span><br>
<a href="javascript: void(0)" style="color: black">News</a><br>
<a href="javascript: void(0)" style="color: black">Links to Webcomics</a><br>
<a href="javascript: void(0)" style="color: black">Bible Quotes</a><br>
<a href="javascript: void(0)" style="color: black">Member Control Panel</a>
</div>
<br>
<div style="background: white; padding: 10px; border-radius: 5px; width: 100%; margin: auto">
<span style="background: gray; color: white; width: 100%; display: block"> ▼ Forum etc.</span><br>
<a href="javascript: void(0)" style="color: black">Forums</a><br>
<a href="javascript: void(0)" style="color: black">Older Musings</a><br>
<a href="javascript: void(0)" style="color: black">Wordpress</a>
</div>
<br>
</div>
<div class="responsive_div" id="middle">
<div style="padding: 20px; padding-top: 10px; background: #F2DD99">
<div style="text-align:center;font-size:32px;">New and Recently Updated</div>
<hr><b><a href="http://www.animeviews.com/news_maincontent.php?ID=386">Texas Supreme Court rules same sex couple may divorce</a></b>
<br>
<br>Posted and updated a news post with a timeline with links to rulings.
<br>
<br>This case has been pending appeal to the Texas Supreme Court for over two years and we have been awaiting a ruling nearly two years after that. *At issue is whether a trial court in that state where same sex marriages are not recognized may grant a divorce to a same sex couple who originally married in another state where same sex marriage is recognized. *<a href="http://www.animeviews.com/article_maincontent.php?ID=255">Submitted 6/22/15</a> <br><HR>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="" >
<br>
<div style="padding-left:20%; padding-right: 20%">
<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="" style="float: left; width: 40%">
<img src="https://www.kaartje2go.nl/kaarten/vrienden-voor-het-leven-7/img/vrienden-voor-het-leven-7.jpg" alt="" style="float: right; width: 40%">
</div>
<div style="clear: both"> </div>
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>
<div class="responsive_div" id="right" style="padding-right:0; ">
<div style="color: silver; font-weight: bold">DAILY BIBLE QUOTE</div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
<img src="http://wierdenland.nl/plinius.jpg" alt="" >
Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
<script>
//Put this script at the end of the body section
function position_banner()
{
if(window.innerWidth>899)
{
document.getElementById('banner').style.margin=0;
document.getElementById('banner').style.marginLeft=document.getElementById('middle').offsetLeft+'px';
document.getElementById('banner').style.minWidth=document.getElementById('middle').clientWidth+'px'
}
else if(window.innerWidth<=899)
{
document.getElementById('banner').style.margin='auto';
document.getElementById('banner').style.display='block';
document.getElementById('banner').style.minWidth='100%';
document.getElementById('banner').style.minHeight='70px';
}
}
position_banner();
window.onresize=function(){position_banner()};
</script>
</body>
</html>