1 Replies - 1015 Views - Last Post: 17 May 2015 - 10:25 PM

#1 marse   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 17-May 15

how to align a button and a search bar beside each other

Posted 17 May 2015 - 07:45 PM

I have a button and a search bar with the search bar currently below the button. How should I do so that the button and the search bar are beside each other
Here is my code

<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">

table, th, td {
    border: 1px solid black;
    
}

p.pos_right {
    position: relative;
    left: 20px;
}

img {
    display: inline-block;
    z-index:-1;
}

#mine{
    display: inline;
    }
	

</style>
</head>
<body>
	<div style="text-align:center;">	
	<p>Most Number of Referrals for the month of <img src="Red-Ribbon.jpg" alt="redribbon" width="200" height="200" style="vertical-align:top"> </p>
	</div>
	
	<div class = "mine" align ="center">
		<button style="background-color:yellow" onclick="window.location.reload()"><b>UPDATE</b></button>
		<table class = "one" style=border="1" cellpadding="0px" cellspacing="0px">
		<tr> 
		<td style="border-style:solid none solid solid;border-color:#4B7B9F;border-width:1px;">
		<input type="text" name="zoom_query" style="width:100px; border:0px solid; height:17px; padding:0px 3px; position:relative;"> 
		</td>
		<td style="border-style:solid;border-color:#4B7B9F;border-width:1px;"> 
		<input type="submit" value="" style="border-style: none; background: url('searchbutton3.gif') no-repeat; width: 24px; height: 20px;">
		</td>
		</tr>
		</table>
	</div>
</body>
</html>


This post has been edited by Martyr2: 17 May 2015 - 10:12 PM
Reason for edit:: Please use code tags in the future, thanks! [code]your code[/code]


Is This A Good Question/Topic? 0
  • +

Replies To: how to align a button and a search bar beside each other

#2 Martyr2   User is offline

  • Programming Theoretician
  • member icon

Reputation: 5510
  • View blog
  • Posts: 14,499
  • Joined: 18-April 07

Re: how to align a button and a search bar beside each other

Posted 17 May 2015 - 10:25 PM

Make sure your button and your text box are the same height and in a container that is wide enough to accommodate the width of the button and the width of the textbox plus padding. Then you just float your textbox to the left. This causes the button after it to float up on the right. Since they are the same height they will then line up.

:)

Fiddle to test...

http://jsfiddle.net/uon6pqxd/

P.S. Make sure you also have the elements in the same table cell. Makes it easier to line up.

This post has been edited by Martyr2: 17 May 2015 - 10:28 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1