Thanks for trying to help.
My website exceeds my expectations so far, but if there is on area that is a nightmare, it is my CSS. (It has grown into a monster one cannot fathom!!)
I have spent the last 30 minutes copying & pasting CSS from FireBug, but there is no way I can recreate this page without giving you all of my code which I am unwilling to do.
Here is the best I could come up with… (Hope it is enough to help trouble-shoot.)
<!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>
<!-- ################## DEBBIE ##################### -->
<!-- HTML Metadata -->
<title>Tax Season Subsection</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<!-- Page Stylesheets -->
<style>
html, body {
height: 100%;
}
html, body, div, form, fieldset, caption, h1, h2, h3, h4, h5, h6, hr, ul, li, ol, ul, dl, dt, dd, br, table, tr, td, th, p, img {
margin: 0;
padding: 0;
}
body:before {
content: "";
float: left;
height: 100%;
margin-top: -32767px;
width: 0;
}
body {
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
font-family: Helvetica,Arial,Sans-Serif;
font-size: 0.9em;
font-weight: normal;
line-height: 1.4em;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
#pageWrapper {
margin: -50px auto 0;
max-width: 1200px;
min-height: 100%;
min-width: 842px;
position: relative;
z-index: 0;
}
.clearfix {
display: block;
}
.clearfix {
display: inline-block;
}
#pageInner {
overflow: hidden;
position: relative;
width: 100%;
z-index: 0;
}
#pageBody_Subsection{
margin: 10px 0 0;
}
#pageBody_Subsection{
margin: 25px 0 0;
position: relative;
width: 100%;
z-index: 2;
}
#pageBody_Subsection #breadcrumb{
padding: 0 0 25px;
}
p#breadcrumb {
padding: 0;
}
p {
padding: 0 0 1em;
}
#pageMidCol_2 {
float: left;
margin-right: -200px;
position: relative;
width: 100%;
z-index: 2;
}
#boxSubsectionIndex {
border: 1px solid #CFCFD4;
clear: both;
margin: 0 220px 50px 0;
max-width: 858px;
min-width: 520px;
padding: 0 50px 70px;
text-align: justify;
}
#boxSubsectionIndex{
border: 1px solid #AAAAAA;
border-radius: 6px;
margin: 0 0 20px;
padding: 0 15px 15px;
}
div#subsectionBar {
display: block;
padding: 0.5em 0;
}
div#boxSubsectionIndex ul#navigation {
clear: both;
display: block;
}
ul#navigation {
display: inline-block;
float: right;
font-size: 1em;
list-style: none outside none;
margin: 0;
padding: 0;
text-align: center;
}
ul {
list-style: none inside none;
}
ul#navigation li {
display: inline-block;
vertical-align: middle;
}
.articleSummary {
clear: both;
margin: 30px 0;
overflow: hidden;
padding: 0 8em;
}
.articleSummary h3 {
font-size: 1.2em;
padding: 0;
}
</style>
</head>
<body>
<div id="pageWrapper" class="clearfix">
<div id="pageInner">
<!-- BODY HEADER -->
<!-- PAGE BODY --><!-- 2013-05-29 -->
<div id="pageBody_Subsection">
<!-- BREADCRUMB -->
<p id='breadcrumb'><a href='/'>Home</a> > <a href='/finance/'>Finance</a> > Tax Season</p>
<!-- MIDDLE COLUMN -->
<div id="pageMidCol_2">
<!-- ARTICLE LISTING -->
<div id="boxSubsectionIndex">
<h2>Tax Season</h2>
<div id='subsectionBar'>
<ul id='navigation'>
<li><span>< Prev</span></li>
<li><strong>1</strong></li>
<li><a href=''>2</a></li>
<li><a href=''>3</a></li>
<li><a class='nav' href=''>Next ></a></li>
</ul>
</div>
<div class='articleSummary'>
<h3><a href=''>Be Sure to Charge Sales Tax Online</a></h3>
<a href=''><img src="/images/InternetSalesTax_100x100.png" width="100" alt="" title="" /></a>
<div class='date'>Published: May 27, 2013</div>
<p>The days of the Internet being a tax-free haven are all but over. Make sure you consult your Tax Professional before selling things online.</p>
</div>
</div><!-- End of ARTICLE LISTING -->
</div><!-- End of #MIDDLE -->
</div><!-- End of #PAGE BODY -->
</div><!-- End of #INNER -->
</div><!-- End of #WRAPPER -->
</body>
</html>
BTW, I didn’t add the drop-down box yet.
What I was hoping for was a simple wrapper DIV around the drop-down box and my Nav bar like this…
Sort By: <<drop-down here>> <<Nav Bar here>>
The Drop-down and Nav Bar should still be floated to the right.
Follow me?
Sincerely,
Debbie