Sort Dropdown stuck in UL

HTML & CSS
1

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

2

Hi Debbie,

As your list items are floated (and your ul doesn’t contain them - which we talked about last time) then the form will start level next to the floated list item.

Either contain the floats (the :after set of rules I gave you last time) or set the form to clear:both.


#sort_comments{clear:both}

Hopefully that is what you were after :slight_smile:

3

Yep, that did it.

Now I need a way to make my Sort drop-down integrate with my “Add Comment” button, but that is probably a new thread?!

Thanks Paul!!

Sincerely,

Debbie

4