How to get the buttons side by side on the same row? - html

Question

I was getting the data from an API and displaying it using HTML.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
The problem is that both the buttons are one above another.I want to bring it on the same line.
Thanks.

Answer 1

You didn't allow enough width for both buttons to fit.
I changed the width to 200px;
#dat{
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
}
button{
margin-left:20px;
display:inline;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>

Answer 2

The problem is the buttons are inside the #dat div which is set to be only 100px wide. If you want them to be centered on the same line, add a new div outside the #dat div with width: 100% and text-align: center.
#dat {
position: absolute;
width: 100px;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
button {
margin-left: 20px;
display: inline;
}
#buttondiv {
width: 100%;
text-align: center;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data">
</p>
<p id="temp">
</p>
<p id="time">
</p>
</div>
<div id="buttondiv">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>

Answer 3

Slightly different approach then above, using floatleft; and auto width.
Created CSS classes as re-useables.
#dat {
position: absolute;
height: 100px;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: auto;
}
.pull-left {
float:left;
}
.ml-10 {
margin-left: 10px;
}
<h1><u>Weather App</u></h1>
<div id="dat">
<p id="data"></p>
<p id="temp"></p>
<p id="time"></p>
<button onclick="convertc()" class="pull-left">imperial</button>
<button onclick="convertf()" class="pull-left ml-10">metric</button>
</div>

Answer 4

You can separate your two buttons in different div and apply CSS in each div to adjust width.
<div>
<button onclick="convertc()">imperial</button>
</div>
<div>
<button onclick="convertf()">metric</button>
</div>
Beside, you can use Bootstrap to keep them inline for every devices.

Answer 5

My suggestions would be as follows:
Do not use the <u> tag for underlining unlinked text. This visual mechanism signifies something clickable. Using it for non-actionable text is bad UX.
Use an <ul> tag for the data items rather than <p> tags. Semantically the information is a list and not paragraphs of textual information.
For the <div> tags, use 100% width so that your UI is scalable with the visitors viewport. The CSS will continue to center the buttons as the viewport size changes.
See the following code:
#dat {
width: 100%;
margin: 0;
}
#dat ul
{
list-style:none;
margin:10px 0;
padding:0;
}
#dat .btns
{
width:100%;
text-align:center;
}
#dat .btns button {
display: inline;
}
<h1>Weather App</h1>
<div id="dat">
<ul>
<li id="data"></li>
<li id="temp"></li>
<li id="time"></li>
</ul>
<div class="btns">
<button onclick="convertc()">imperial</button>
<button onclick="convertf()">metric</button>
</div>
</div>