CODEWITHSUNDEEP
htmlweb
Magicskid
Magicskid

Reputation: 33

How would I get these two drop down menus right next to each other?

On my website Website I can't seem to get these drop down menus right next to each other, how would I do that?

This is the code I have...

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>$MODULE_NAME$ - $SITE_NAME$</title>
<?$META_DESCRIPTION$?>

<link type="text/css" rel="StyleSheet" href="/_st/my.css" />
</head>
<body>
$ADMIN_BAR$
$GLOBAL_AHEADER$
<!-- <middle> -->
<div id="maincol">
$MODULE_SEARCH_FORM$
<!-- <body> --><table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="80%"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->MAIN<!--</s>--></a> &raquo;     <!--<s5208>-->MOVIES<!--</s>--></td>
<td align="right" style="white-space: nowrap;"><?if($ADD_ENTRY_LINK$)?>[ <a href="$ADD_ENTRY_LINK$"><!--<s5202>-->Add new entry<!--</s>--></a> ]<?endif?></td>
</tr>
</table>
<hr />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<div>
<form name="yearselect">FILTER BY:
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">YEAR</option>
<option value="year/1">2014</option>
<option value="year/2">2013</option>
</select>
</form>
</div><div>
<form name="genreselect">
<select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">GENRE</option>
<option value="URL">Action</option>
<option value="URL">Horror</option>
</select>
</form>
</div>
<td align="right"><?if($PAGE_SELECTOR$)?><!--<s3015>-->Pages<!--</s>-->:         $PAGE_SELECTOR$<?endif?></td>
</tr>
</table>
<hr />
$BODY$
<?if($PAGE_SELECTOR1$)?><div style="text-align:center;">$PAGE_SELECTOR1$</div><?endif?>        <!-- </body> -->
</div>
<div id="sidebar">
<div id="soc">
<?if($RSS_LINK$)?><a href="$RSS_LINK$" target="_blank" title="RSS" class="soc-rss"></a>        <?endif?>
<a href="http://del.icio.us/post?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Del.icio.us" class="soc-del"></a>
<a href="http://www.facebook.com/share.php?u=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="FaceBook" class="soc-facebook"></a>
<a href="http://memori.ru/link/?sm=1&u_data[url]=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Memori" class="soc-memori"></a>
<a href="http://vkontakte.ru/share.php?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Vkontakte" class="soc-vkontakte"></a>
<a href="http://twitter.com/share?url=$HOME_PAGE_LINK$" rel="nofollow" target="_blank" title="Twitter" class="soc-twitter"></a>
</div>
$GLOBAL_CLEFTER$
</div>
<div class="clear"></div>
<!-- </middle> -->
</div>
</div>
$GLOBAL_BFOOTER$
</div>
</div>
</div>
</body>
</html>

That is the full source of the code but, I only need help with part..

Upvotes: 0

Views: 1890

Answers (3)

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a valid HTML5 solution to your problem, fiddle

<form>
  <table>
    <tr>
      <td>FILTER BY:
        <select name="yearselect">
          <option selected="selected">YEAR</option>
          <option value="year/1">2014</option>
          <option value="year/2">2013</option>
        </select>
      </td>
      <td> 
        <select name="genreselect">
          <option selected="selected">GENRE</option>
          <option value="URL">Action</option>
          <option value="URL">Horror</option>
        </select>
      </td>
    </tr>
  </table>
</form>

Upvotes: 1

dster77
dster77

Reputation: 196

So you have the table stretching all the way across the div, and each drop down centered in each column. You need to set a max width on the table's div so that it will only spread a certain width and then the drop downs will not spread further apart from that. Or, you could put them in the same column (so basically no table) and justify them to one side.

Upvotes: 0

Sarbbottam
Sarbbottam

Reputation: 5580

Avoid table!! Refer this fiddle

Markup:

<div>
    <form name="yearselect">FILTER BY:
        <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
            <option selected="selected">YEAR</option>
            <option value="year/1">2014</option>
            <option value="year/2">2013</option>
        </select>
    </form>
</div><div>
    <form name="genreselect">
        <select name="menu" onChange="window.document.location.href=this.options[this.selectedIndex].value;" value="GO">
            <option selected="selected">GENRE</option>
            <option value="URL">Action</option>
            <option value="URL">Horror</option>
        </select>
    </form>
</div>

CSS:

div {
    display: inline-block;
    width: 50%;
}

Upvotes: 0

Related Questions