Adjacent buttons

Question

Adjacent buttons

I am trying to place two buttons side by side, but they keep appearing stacked on top of each other. Can anyone help me figure out how to solve this? Here's the code:

Styling (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>

Here is 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>

Any suggestions or solutions would be greatly appreciated!

html css

Answer 1

Answer №1

Take a look at the jSFiDDLE

Remove the unnecessary div tag and wrap both anchor tags under a single div tag

Here's an example:

  <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>

Answer 2

Take a look at the jSFiDDLE

Remove the unnecessary div tag and wrap both anchor tags under a single div tag

Here's an example:

  <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>

Answer 3

Answer №2

To address the issue, three key steps need to be taken:

Replace the align="right" attribute with float:right.
Erase the unnecessary <br> tag from within your code.
Include a div styled with CSS clear:both once your buttons are in place.

View this jsfiddle for an example

Answer 4

To address the issue, three key steps need to be taken:

Replace the align="right" attribute with float:right.
Erase the unnecessary <br> tag from within your code.
Include a div styled with CSS clear:both once your buttons are in place.

View this jsfiddle for an example

Answer 5

Answer №3

Initially, there seems to be a bit of confusion in your HTML code:

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

The corrected structure should look like this:

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

Secondly, if you intend to create a clickable button, it may be more appropriate to use a <button> element instead of wrapping an <a><input></a>.

Lastly, consider adding the following style rules to your div elements:

float: right;

Remember to include a clear element after this to ensure proper layout, for example:

<br class="clearFloat">

And in your CSS file:

.clearFloat { clear: both; }

Answer 6

Initially, there seems to be a bit of confusion in your HTML code:

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

The corrected structure should look like this:

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

Secondly, if you intend to create a clickable button, it may be more appropriate to use a <button> element instead of wrapping an <a><input></a>.

Lastly, consider adding the following style rules to your div elements:

float: right;

Remember to include a clear element after this to ensure proper layout, for example:

<br class="clearFloat">

And in your CSS file:

.clearFloat { clear: both; }

Answer 7

Answer №4

To simplify the code, remove two div elements and use only one div with the following CSS styling:

#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>

Answer 8

To simplify the code, remove two div elements and use only one div with the following CSS styling:

#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>

Adjacent buttons

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

PHP's Encoding Woes Are Back in Action

loading xml data into a table partially using jquery

The CSS styling for changing the background-color and color of list items (li) is

adaptive height that scales with content proportionally

What is the best way to conceal the border and background color of the dropdown arrow in an HTML <select> tag?

My Ruby on Rails app seems to be malfunctioning in a major way

What could be causing my carousel slider images to not adapt to different screen sizes?

The html input box's ability to handle overflow situations

The right column in Bootstrap is covering up the left column

What is the best way to construct the following layout with columns in Bootstrap?

Switch between hiding and showing the DIV element flaw

Tips for customizing the border radius style of the menu in Vuetify's v-autocomplete component

Issue with the Textualizer effect in HTML not functioning properly

Map region indicator tooltip

Utilizing jQuery to retrieve multiple values from a select box through the onchange event

Button Click Does Not Trigger Bootstrap Modal Display

Tips for implementing a sticky sidebar in HTML5 with jQuery

The styles for the React calendar are not being properly applied to the calendar component due to CSS overriding

Mouse over the background of an image in jQuery to create a fade-in effect, without affecting any content inside

Saving HTML form field data through erb for persistent storage