SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

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



    Code:
    		    	<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>
    Code:
    #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. #2
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,286
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    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}
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  3. #3
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    calif
    Posts
    743
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply.
    What I understood you to mean was add to add display:inline-block; to the CSS like this;

    Code:
    .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. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,816
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,286
    Mentioned
    121 Post(s)
    Tagged
    1 Thread(s)
    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.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •