Unable to align the button parallel with my input fields

I am facing an issue where my two input fields are not aligning properly with the button on my webpage. The button is appearing below the inputs instead of being at the same height.

#startButton {
  height: 90%;
  width: 20%;
  margin-left: 79%;
  position: absolute;
  outline: 0;
}
<div id='menu'>
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  <br>
  <br> Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  <button id='startButton'>Start</button>
</div>

htmlcss

Answer №1

Simply specify a top value.

#startButton {
  height: 90%;
  width: 20%;
  margin-left: 79%;
  position: absolute;
  top: 10px;
  outline: 0;
}
<div id='menu'>
  Number of columns:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  <br>
  <br> Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  <button id='startButton'>Start</button>
</div>

Answer №2

Have you considered utilizing the float property to achieve your desired layout?

#startButton {
  height: 90%;
  width: 20%;
  float:right;
  outline: 0;
}
.form {
width:50%;
display:inline-block
}
<div id='menu'>
  <div class="form">
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  </div>
  <div class="form">
   Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  </div>
  <button id='startButton'>Start</button>
</div>

Answer №3

To ensure proper alignment, you must assign a position attribute to your container with the id of #menu. Add position: relative; to it and then specify a top value for your button with the id of #startButton by adding top: 0;. These adjustments should resolve the issue.

#startButton {
  height: 90%;
  width: 20%;
  margin-left: 79%;
  position: absolute;
  outline: 0;
 top: 0;
}
#menu {
position: relative;
}
<div id='menu'>
  Number of colums:
  <br>
  <input id='colsInput' type='number' maxlength='2'>
  <br>
  <br> Number of rows:
  <br>
  <input id='rowsInput' type='number' maxlength='2'>
  <button id='startButton'>Start</button>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position an image to the right with a specific height using position absolute in Bootstrap 4.3

enter image description hereI am in the process of updating my Bootstrap 4.0 CSS to Bootstrap 4.3 CSS. Within my price section, there are 3 pricing panels. One of these panels includes an image with absolute positioning and specific pixel coordinates - l- ...

htmlcssbootstrap-4

Experimenting with @media queries to dynamically resize images for various devices such as phones, tablets, and desktop

I'm struggling with making the background images on my website responsive. I have already added media queries to my page, but they seem ineffective and I am unsure of what else to try. Below are the HTML and CSS codes for the three images. Any suggest ...

htmlcssbootstrap-4media-queries

Height CSS does not conceal side bar hyperlinks

CSS .nested-menu { .list-group-item { cursor: pointer; } .nested { list-style-type: none; } ul.submenu { height: 0; } & .expand { ul.submenu { ...

css

Issue with Bootstrap-vue grids causing overlap on smaller mobile screens

An issue has been brought to our attention regarding the layout causing overlaps on specific mobile devices. The problematic section of the grid is outlined below: <FluidContainer> <BRow> <BCol cols="8" lg="4" ...

htmlcssbootstrap-4bootstrap-vue

Converting user's birthdate input from HTML to their age using PHP

I am facing an issue with retrieving the correct date from a date-time-picker named "dob" and passing it to PHP. When I try to post the date into the database user_age column, it only displays '2017'. However, if I manually set $dob to '10/0 ...

phphtml

Tips for deleting HTML tags from a database

Whenever I add something to my database, it also includes the html tags. Is there a way to prevent this from happening? public function retrieveDataFromDatabase() { $query = "SELECT * FROM gb ORDER BY id DESC LIMIT 0, 4"; //data output if ...

phphtmldatabase

buttons for displaying a slideshow using jquery

I've been struggling with a problem for a while and I'm trying to find a solution. Here's the link to my slideshow: http://jsfiddle.net/Jtec5/33/ Here are the CSS codes: #slideshow { margin: 50px auto; position: relative; width: ...

jquerycssslideshow

I am facing an issue where I have an identical ID for three separate xPaths, but I am only able to successfully use one of them. The other two are not functioning as expected. (Util

#IMPORTS from lib2to3.pgen2 import driver import subprocess, sys def install(package): subprocess.check_call([sys.executable, "-m", "pip", "install", package]) install("selenium") install("chromedriver_a ...

pythonhtmlseleniumselenium-webdriverxpath

Having trouble with the background image link not displaying correctly in Firefox

Currently, I am working on enhancing this specific page . Each block on the page is intended to contain three animated links. The functionality works perfectly in Chrome and Safari browsers, however, Firefox seems to be causing some issues. When viewing th ...

jqueryhtmlcssfirefox

The form features a "Select all" button alongside a series of checkboxes for multiple-choice options

I am facing difficulties trying to get the "Select all" and "Remove all" buttons to function properly within my form. Whenever I remove the "[]" (array) from the name attribute of the checkboxes, the JavaScript code works perfectly fine. However, since I n ...

javascripthtml

Issues with the functionality of Angular 2 routerLink

Unable to navigate from the homepage to the login page by clicking on <a routerLink="/login">Login</a>. Despite reviewing tutorials and developer guides on Angular 2 website. Current code snippet: index.html: <html> <head> ...

htmlangulartypescriptroutes

Textarea with integrated checkbox

Can checkboxes be incorporated within a textarea using basic HTML and CSS? I'm aware that this can be achieved with tables, but I'm curious if it's possible within a textarea itself. ...

htmlcss

Should we still be using <input type="date" /> in 2021?

I've come across some old articles cautioning against using , but they were written a couple of years ago. I'm wondering if it's safe to use in 2021 without negatively impacting the user experience. ...

htmlreactjs

Two <div> elements each have a width of 50% and display as inline-block, yet they are still not aligned on the same

My website features two team logos on the same line, but they sometimes appear with whitespace between them. Here is the code snippet: <span class="field-content"><div class="field_home_team-wraper"><a href="/tran-dau/arsenal-vs-west-bromwi ...

htmlcssresponsive-design

picture is not properly aligned with the right side of the container

I'm struggling to align the image flush with the right border of the div without any margin or padding. I've tried various methods but none seem to work. Hoping someone can provide a solution for me. Thank you. Below is the code snippet: HTML ...

htmlcssimage

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

javascripthtmlcssbootstrap-5

Creating a reference to a hyperlink or button in a variable

I am currently working on creating a login form for a school project website. The section that is posing a challenge for me is determining if I can assign a variable to a href or button. For instance, imagine that the href has the variable 'A' ...

phphtmlcssbuttonhref

Popup modal experiencing technical difficulties

As part of my college project, I am creating a website and have hosted it on a free hosting site to showcase. You can view the site here. In the informal section of the menu, I wanted to include a pop-up modal. Here is the code snippet for reference: http: ...

htmlcss

Page showing the content of the .htaccess file

I have a webpage where I am using a .htaccess file to remove PHP extensions from the URLs. However, I am facing an issue where the code is being displayed on the page itself. Is there a way to hide this code so that it is not visible to users? The code i ...

phphtml.htaccessinclude

From where was this color of the navigation bar derived?

As I delve into a site previously worked on by someone else, my task is to recreate the navigation they implemented. However, I am unable to locate in the source code what was used for the navigation background. The challenge lies in the fact that after m ...

htmlcssnav