I've tried but can't get DIV's side-by-side. Help please

HTML & CSS
1

I’ve tried but I can’t get these DIV’s side-by-side. Help please.

		    	<div id="container1">
		         <div class="container1-1">
		  	 <form method="get" action="search.php">
	
		  	 <div id="siteSearch">Enter Search Words <img src="themes/default/images/arrow-red.png" alt="" />&nbsp;&nbsp;
		  	 <input type="hidden" name="type" value="videos"/>
		  	 <input type="text" name="keyword" id="sbi1" value="" onfocus="if(this.value==this.defaultValue) this.value='';"/>Select <img src="themes/default/images/arrow-red.png" alt="" /><input type="image" align="middle" src="images/view.png" name="sa" value="Search" id="mySearch"/><br/>
		  	 Enter Search Words&nbsp;&nbsp;<img src="themes/default/images/arrow-red.png" align="middle" alt="" /><br/><br/>
		  	 </div>
		  	 </form>
		  	 </div>
	
		  	 <div class="container1-2">
		  	 <form action="login.php" method="post" accept-charset="UTF-8" class="middletext">
		  	<p>
		  	<style type="text/css">
		  	.form_label {
		  	font-size: 100%;
		 	 color: #000000;
			 }
		 	 #user_name_login {
		  	width: 40px;
		 	 }
		  	#password_login {
		  	width: 40px;
		  	}
		  	</style>
		  	<label for="user_name_login" class="form_label">Username</label>
		  	<input type="text" name="user_name_login" id="user_name_login" size="10" />
		  	<label for="password_login" class="form_label">Password</label>
		  	<input type="password" name="password_login" size="10" />
		  	<input type="image" src="images/login.png" value="[var.lang_login_now]" class="btn_vid2" style="vertical-align:middle" alt="" />
		  	<input type="hidden" name="submitted" value="yes" />
		  	<input type="hidden" name="remember_me" value="remember_me" />
		  	</p>
		  	</form>
		  	 </div>
		  	</div>
	


#container1
								{
								overflow: hidden;
								border:1px solid #696969;
								font-size: 16px;
								color: #000000;
								font-family: Arial;
								text-align: left;
								padding: 0px 0px 0px 0px;;
								margin: 5px 0px 0px 0px;
								width:980px;
								height:150px;
								}
			
			
				.container1-1
				{
				border:1px solid #;
				font-size: 16px;
				color: #000000;
				font-family: Arial;
				text-align: left;
				padding: 12px 0px 0px 0px;;
				width:420px;
				height:100px;
				}
	
	
					.container1-2
					{
					font-size: 16px;
					color: #000000;
					font-family: Arial;
					text-align: right;
					padding: 0px 0px 0px 0px;;
					margin: 5px 0px 0px 0px;
					width:320px;
					height:50px;
					}
2

divs are block level elements by default, which essentially means there is only one on a horizontal axis at a time.

You can use .container1-1, .container1-2 {display:inline-block}

3

Thanks for your reply.
What I understood you to mean was add to add display:inline-block; to the CSS like this;


.container1-1
{
display:inline-block;
border:1px solid #;
font-size: 16px;
color: #000000;
font-family: Arial;
text-align: left;
margin: 5px 0px 0px 0px;
padding: 12px 0px 0px 0px;;
width:420px;
height:100px;
}
	
	
.container1-2
{
display:inline-block;					
font-size: 16px;
color: #000000;
font-family: Arial;
text-align: right;
margin: 5px 0px 0px 0px;
padding: 12px 0px 0px 0px;;
width:420px;
height:100px;
}

Now container1-1 and container1-2 are side-by-side, but container1-2 is to the right and below container1-1. Can you suggest a remedy? I was hoping they be horizontally the same height. I look forward to additional help thanks.

4

add this instead:
.container1-1, .container1-2 {display:inline-block; vertical-align: top; }

OR you could
.container1-1, .container1-2 {float:left; }

BTW, you may want to reset the margins and paddings on your forms.

hope that helps

5

I put the css for a reason - it allowed you to place the style to both containers, and prevented you from having to type the same css twice. It makes maintenance easier.

6

Also the other attributes. These two divs are sharing a lot of the same properties. A comma is nice here.

.container1-1, .container1-2 {
display:inline-block;
vertical-align: top;
font-size: 16px;
color: #000000;
font-family: Arial;
margin: 5px 0px 0px 0px;
padding: 12px 0px 0px 0px;; <– watch out, two ;'s
width:420px;
height:100px;
}

now you only have to override the differences.
.container1-2 {
text-align: right;
}