Question

I have some text in a link “title” and also a form box and I want the text on the left and the form on the right. However, whenever I try to do this what comes out is the line of text and then the form appears BELOW the text. I want them on the same horizontal line.

So I want with the dots: TEXT …………………………… SIGN IN BOX

here is the code:

 <div id="container">

<a href="index.php"><font size="6">Title</font><a>

 <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"> 
<span>Sign in</span></a> </div>

<fieldset id="signin_menu">
<form method="post" id="signin">
 <p>
  <label for="username">Username or email</label>
  <input id="username" name="username" value="" title="username" tabindex="4" type="text">
  </p>
   </form>
  </fieldset>
 </div>

Here is the CSS for the container:

#container {
margin:0 auto;
position:relative;
width:780px;
}

and topnav

#topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
 }

How do I accomplish the task? Thanks

Answer 1

DIV is a block element so will always do that. You need to make it a non-block element by setting float and display.
Besides the solution below you could use a table but that is frowned upon.

 <div id="container">

    <div class="titleDiv"><a href="index.php"><font size="6">Title</font><a></div>

     <div id="topnav" class="topnav"> Have an account? <a href="login" class="signin"> 
<span>Sign in</span></a> 

<fieldset id="signin_menu">
<form method="post" id="signin">
 <p>
  <label for="username">Username or email</label>
  <input id="username" name="username" value="" title="username" tabindex="4" type="text">
  </p>
   </form>
  </fieldset></div>
 </div>

Then set your CSS to this:

 #topnav {
font-size:11px;
line-height:23px;
padding:10px 0 12px;
text-align:right;
float:left; display:inline;
 }

.titleDiv
{
  float:left; display:inline;
}