side by side html button allignment without css

Question

I am using an application that limits coding to pure html. I am trying to align the buttons on the same line. Currently the code written aligns the buttons left & center, but when I change to the view mode, this is what I see:

Here is the code: </td><p align="left"><a href="#description2"><button><font size="+2">Cameo - European Crabapples</font></button></a><p align="center"><a href="#description3"><button><font size="+2">EverCrisp - JAZZ™</font></button></a></p></td>

I have searched the web, & every site uses css. Any help is greatly appreciated. This is my first attempt at HTML & I am self taught. So what I am doing is probably not done correctly. Sorry in advance & thank you. If i posted under the wrong tag please advise me, which tag to post under.

Answer 1

Hi @Frank Melan

The following code puts the buttons next to one another:

<div style="display: inline-block;"><button><font size="+2">Cameo - European Crabapples</font></button> <button><font size="+2">EverCrisp - JAZZ™</font></button></div>

Display:

----------------------------------------

If this is helpful please accept answer.

Answer 2

Thank you for replying. I added this piece to your code <a href="#description2">, & it provided a background color to other areas of the page. The sample provided sets the buttons perfectly, but was missing the piece to activate the button. Is there something I am missing?

I was got this to work, but the buttons are against each other.

</td><div><div style="float:left"><p align="left"><a href="#description2"><button><font size="+2">Cameo - European Crabapples</font></button></a><p align="left"></div><div><div style="float:center"><a href="#description3"><button><font size="+2">EverCrisp - JAZZ™</font></button></a></p><p align="center"><td></td></div><div style="float:center"></div></td></div>  

Answer 3

@Dillon Silzer Sorry I didn't tag you in my last response. I forgot to do so.

Here is my revised code: <center></td><div><div style="float:left"><p align="left"><a href="#description2"><button><font size="+2">Cameo - European Crabapples</font></button></a><p align="left"></div><div><div style="float:center"><a href="#description3"><button><font size="+2">EverCrisp - JAZZ™</font></button></a></p><p align="center"><td></td></div><div style="float:center"></div></td></div></center> I found that if I added <center> & </center> it worked, but left a gap. If the gap con't be removed & a 3rd div added on the same line, I can live with it. Can you suggest any improvements?

Answer 4

@Dillon Silzer THANK YOU! (apparently we were both posting at the same time) It worked perfectly. previously I tried   but apparently just not at the right location. Also it allows me to add a 3rd button, which is exactly what I wanted to do. Again thank you.

Answer 5

Here is working code, for further users:
<td> <div style="display: inline-block;"><a href="#description2"><button><font size="+2">Cameo - European Crabapples</font></button></a>                   <a href="#description3"><button><font size="+2">EverCrisp - JAZZ™</font></button></a>                    <a href="#description4"><button><font size="+2">Jersey Mac – Liberty </font></button></a></td></div>
The original author of the code is @Dillon Silzer . He wrote the code & I modified it for my use. The   is for spacing between the buttons.