CODEWITHSUNDEEP
htmlcss
Gelu
Gelu

Reputation: 67

Buttons next to each other

I have two buttons and I want to put them next to each other. How could I do it? Everytime a button is under the other. Here's the code:

CSS:

<style type="text/css">

.button_example{
border:1px solid #B7B7B7; 
text-align: center; 
color: #FFFFFF; 
background-color: #D3D3D3;
}

.button_example:hover{
border:1px solid #B7B7B7; 
text-align: center; 
color: #1f1f1f; 
background-color: #ffffff;
}
</style></head>

and the HTML:

<div align="right"><a href="http://www.theamazingmonth.pusku.com/rules.html"><input type="button" class="button_example" value="Rules" /></a></div>
<div align="right"><a href="http://www.theamazingmonth.pusku.com/info.html"><input type="button" class="button_example" value="Info" /></a></div>

Thanks in advance!

Upvotes: 1

Views: 43253

Answers (4)

kesava reddy
kesava reddy

Reputation: 91

Remove 2 div's, use only one div and add the CSS as provided below:

#butn{
    margin: 0 auto;
    display: block;
}
<div id="butn" align="right">
    <a href="http://www.theamazingmonth.pusku.com/rules.html"><input type="button" class="button_example" value="Rules" /></a>
    <a href="http://www.theamazingmonth.pusku.com/info.html"><input type="button" class="button_example" value="Info" /></a>
</div>

Upvotes: 0

ebram khalil
ebram khalil

Reputation: 8321

You need to do 3 things:

  1. remove the align="right" and replace it with float:right.
  2. Remove the extra <br> inside your code.
  3. Add div with css clear:both after you finish your buttons.

jsfiddle example

Upvotes: 2

NiRUS
NiRUS

Reputation: 4259

Check out the jSFiDDLE

remove the extra div tag and enclose both a tag under one div tag

like this:

  <div align="right">
    <a href="http://www.theamazingmonth.pusku.com/rules.html"><input type="button" class="button_example" value="Rules" /></a>
    <a href="http://www.theamazingmonth.pusku.com/info.html"><input type="button" class="button_example" value="Info" /></a>
</div>

Upvotes: 4

Setthase
Setthase

Reputation: 14398

At first - you have mess in your HTML part:

<div><a><input/></div></a>
<div><a><input/></div></a>

You should have:

<div><a><input/></a></div>
<div><a><input/></a></div>

At second – if you want clickable button why don't use a <button> tag instead of <a><input></a>?

And the final. Try add this style to your div's:

float: right;

But you need add some clear item after this. For example:

<br class="clearFloat">

and css 

.clearFloat { clear: both; }

Upvotes: 1

Related Questions