I just added a Sort Menu to my User Comments section, but can’t figure out how to get the drop-down to stay below the buttons.
As usual, it is nearly impossible for me to recreate the things I see on my nearly finished - but unpublished - website. However, here is something that should show the issue…
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="$description" />
<meta name="keywords" content="$keywords" />
<style>
#boxComments ul {
display: block;
margin: 0 0 0 20px;
padding: 0;
}
ul {
list-style: none inside none;
}
#boxComments ul li {
float: left;
margin: 5px 5px 0 0;
padding: 0;
}
div.subsectionBar {
display: block;
padding: 0.5em 0;
}
div.subsectionBar:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.subsectionBar .drop {
display: inline;
margin: 0;
}
.button2 {
margin: -1em 0 0;
}
.button, .button2 {
background: url("/buttons/buttonGradientBlue.gif") repeat-x scroll 0 0 #3181BC;
border: 1px solid #326985;
border-radius: 3px;
color: #FFFFFF;
display: inline-block;
font-family: inherit;
font-size: 12px;
height: 29px;
line-height: 27px;
margin: 2em 0 1em;
overflow: visible;
padding: 0 2em 0;
text-align: center;
text-decoration: none;
width: auto;
}
</style>
</head>
<body>
<div id="boxComments">
<h3>User Comments</h3>
<ul>
<li>
<a class='button2' href=''>Log In</a>
</li>
<li>or</li>
<li>
<a class='button2' href=''>Create an Account</a>
</li>
</ul>
<!-- NEW -->
<!-- Sort Article-Comments -->
<form id="sort_comments" action="" method="get">
<!-- Comment Bar (Top) -->
<div class='subsectionBar'>
<!-- Sort Menu -->
<div class="drop">
<label for="sortrequest">Sort by:</label>
<select name="sortrequest">
<option value="by-date-desc" >Date (Newest 1st)</option>
<option value="by-date-asc" >Date (Oldest 1st)</option>
</select>
<!-- Submit Button -->
<input type='submit' name='submit' value='Go'/>
</div><!-- End of SORT MENU -->
<!-- Navigation Bar -->
</div><!-- End of COMMENT BAR -->
</form><!-- End of SORT ARTICLE-COMMENTS -->
</div>
</body>
</html>
I am thinking the issue has to do with my Form…
Sincerely,
Debbie