Forums

brianatlarge

Website: http://studentseatfree.com/search.php

So I'm wanting to put the sort part at the top of the page in the green box at the left side and then the search part on the right side, but whenever I put them in seperate div's or spans and try to align it a certain way it does not work. Any tips?

Thanks.

HTML:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd\">
<html>

	<head>
		<title>SEF Search Results</title>
		<meta http-equiv=\"Content-type\" content=\"text/html; charset=UTF-8\">
		<link rel=StyleSheet href=\"main_style.css\" type=\"text/css\">
		<script src=\"jquery.js\" type=\"text/javascript\"></script>
  <script type=\"text/javascript\"> 
  $(document).ready(function()
  {
	//for div
	 $(\"tr.contentbox:even\").css(\"background-color\", \"#f2fef2\");
	  $(\"tr.contentbox:odd\").css(\"background-color\", \"#daf2c8\");
  });
  </script>

	</head>
	<body>
	<div class=\"everything\">
		
	<div class=\"searchbox\"></div>
	
	<form class=\"searchformbox\" action=\"search.php?search_query=&amp;sort_type=restaurant_name\" method=GET>
		Sort by: <select name=\"sort_type\">
			<option value=restaurant_name selected>Restaurant Name
			<option value=restaurant_type>Restaurant Type
			<option value=discount_type>Discount Type
		</select>

		<input type=submit value=\"Sort\">
	
		<input type=text name=search_query value=\"\">
		<input type=submit value=\"Search\">
	</form>
	
	<div class=\"logobox\"></div>
	<div class=\"adtopbox\"></div>
	<div class=\"refine\">
		<div>Showing all coupons</div>

	</div>
	<div class=\"adbox\"></div>
	<div class=\"skyscraper\"></div>
	<div class=\"results\">
	&lt;&nbsp;1 &gt;	
	&nbsp;<a href=search.php>All Listings</a><br>
	</div>
	
	<table class=\"results\" border=0>

	<tr class=contentbox>
		<th class=\"resultspadding\">Restaurant Name</th>
		<th class=\"resultspadding\">Description</th>
		<th class=\"resultspadding\">Discount Type</th>
		<th class=\"resultspadding\">Restaurant Type</th>
		<th class=\"resultspadding\">Map</th></tr>

		<tr class=contentbox>
		<td class=\"resultspadding\"></td>
		<td class=\"resultspadding\"></td>
		<td class=\"resultspadding\"></td>
		<td class=\"resultspadding\"></td>
		<td class=\"resultspadding\"><a href=\"\">View map</a></td>
	</tr>
		<tr class=contentbox>

		<td class=\"resultspadding\">Caliente Grille</td>
		<td class=\"resultspadding\">2 for $10 on Tuesdays</td>
		<td class=\"resultspadding\">Flat</td>
		<td class=\"resultspadding\">Tex-Mex</td>
		<td class=\"resultspadding\"><a href=\"http://maps.google.com/maps?f=q&hl=en&q=3319+Hardy+St%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>
	</tr>

		<tr class=contentbox>
		<td class=\"resultspadding\">Grand China Buffett</td>
		<td class=\"resultspadding\">10% Discount</td>
		<td class=\"resultspadding\">Percentage</td>
		<td class=\"resultspadding\">Chinese</td>
		<td class=\"resultspadding\"><a href=\"http://maps.google.com/maps?f=q&hl=en&q=560+Weathersby+Rd%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>

	</tr>
		<tr class=contentbox>
		<td class=\"resultspadding\">Little Tokyo</td>
		<td class=\"resultspadding\">10% Discount</td>
		<td class=\"resultspadding\">Percentage</td>
		<td class=\"resultspadding\">Japanese</td>
		<td class=\"resultspadding\"><a href=\"http://maps.google.com/maps?f=q&hl=en&q=3800+Hardy+St%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>

	</tr>
		<tr class=contentbox>
		<td class=\"resultspadding\">My House</td>
		<td class=\"resultspadding\">Just to see if the maps link works.</td>
		<td class=\"resultspadding\">None</td>
		<td class=\"resultspadding\">Home Cooking</td>
		<td class=\"resultspadding\"><a href=\"http://maps.google.com/maps?f=q&hl=en&q=6021+S+Regal+Ln%2C+Charlotte%2C+NC&ie=UTF8&iwloc=addr\">View map</a></td>

	</tr>
		<tr class=contentbox>
		<td class=\"resultspadding\">Spicy Pickle</td>
		<td class=\"resultspadding\">10% Discount</td>
		<td class=\"resultspadding\">Percentage</td>
		<td class=\"resultspadding\">Deli</td>
		<td class=\"resultspadding\"><a href=\"http://maps.google.com/maps?f=q&hl=en&q=6156+US+Highway+98%2C+Hattiesburg%2C+MS+39402&ie=UTF8&iwloc=addr\">View map</a></td>

	</tr>
		</table>
	<div class=\"clear\"></div>

	<div id=\"footer\">
				<span id=\"footer_text\">
					&copy; Copyright 2008 StuckPixel Studio LLC &amp; Jaree Marketing LLC<br>

					All Rights Reserved<br>
					Hattiesburg, MS
				</span>
				<div style=\"float: right;\">
					<p>
						<a href=\"http://validator.w3.org/check?uri=referer\">
							<img src=\"http://www.w3.org/Icons/valid-xhtml10\" alt=\"Valid XHTML 1.0 Strict\" height=\"31\" width=\"88\">
						</a>
					</p>

				</div>
			</div>

	</div>
	<script type=\"text/javascript\">
var gaJsHost = ((\"https:\" == document.location.protocol) ? \"https://ssl.\" : \"http://www.\");
document.write(unescape(\"%3Cscript src='\" + gaJsHost + \"google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E\"));
</script>
<script type=\"text/javascript\">
var pageTracker = _gat._getTracker(\"UA-5202505-1\");
pageTracker._trackPageview();
</script>
	</body>
</html>

CSS:

* { margin: 0; padding: 0; }

body
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;
}

.everything
{
background:url(images/bg.jpg);
background-position: center top;
background-repeat:repeat-y;
margin:0px auto;
width:999px;
display:block;
}

.searchbox
{
background:url(images/topgreen.jpg);
background-repeat:no-repeat;
height:30px;
width:999px;
}

.searchformbox
{
margin-top:-27px;
margin-left:30px;
}

.logobox
{
background:url(images/newlogo.jpg);
width:175px;
min-height:135px;
height:135px;
float:left;
display:inline;
margin-left:20px;
margin-top:10px;
}

.adtopbox
{
background:url(images/adtopholder.jpg);
width:730px;
min-height:90px;
height:90px;
margin-left:200px;
margin-top:20px;
}

.adbox
{
background:url(images/adboxholder.jpg);
width:300px;
min-height:250px;
height:250px;
float:right;
margin-right:70px;
margin-top:15px;
}

.skyscraper
{
background:url(images/skyscraperad.jpg);
width:160px;
min-height:600px;
height:600px;
float:right;
margin-right:-223px;
margin-top:294px;
}

.contentbox
{
width:560px;
min-height:100px;
padding: 5px;
background-position: left top;
margin-left:30px;
}

.results 
{
margin-left:30px;
}

.resultspadding 
{
padding:5px;
}

.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}

.refine
{
background-color:#eeeeee;
min-height:25px;
width:890px;
padding:5px;
margin-left:30px;
margin-top:40px;
background-position: center top;

}

/*Footer*/

#footer {
padding:10px 0px 70px 10px;
color:#0c0c0c;
width:951px;
background-color:#daf2c8;
font-size:9px;
text-align: left;
line-height:12px;
margin:35px auto 0px;
}

#footer img {
float:left;
margin-right:10px;
}

#footer span {
display:block;
float:left;
width:300px;
}

#footer a {
color:#9e8292;
text-decoration:none;
}

img {border:none}

div.clear { clear: both; }

chriscoyier

Since both the select element and the input elements are both within the same form, you'll need to put some div's inside that form to get it done. Shouldn't be a big problem.

<form>
<div id="sort-area">
...sorting stuff...
</div>
<div id="search-area">
....search stuff....
</div>
</form>

Then in the CSS you can delcare a width and a float value for both those ID's and that should get it done for ya.

treehouse : what would you like to learn today?

Forums

Splitting text left and right on the same line.