The buttons are lined up in a horizontal fashion

Review the following code snippet

body,
html {
  margin: 0;
  height: 100%;
}

.background {
  height: 100%;
  background-image: url(../images/home-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.button {
  border: none;
  padding: 15px 25px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  float: right;
  width: 28vw;
  border-radius: 50px;
  position: relative;
  margin-right: 7vw;
}

.button:hover {
  background-color: green;
}

.login {
  background-color: #DF6248;
  color: white;
  margin-top: 12vw;
}

.register {
  background-color: #DF6248;
  color: white;
  margin-top: 12vw;
}
<!DOCTYPE html>
<html>

<head>
  <title>HOME</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>

<body class=background>
  <button class="button login">LOGIN</button>
  <button class="button register">REGISTER</button>
</body>

</html>

The current issue is with the alignment of the buttons. The goal is to have the Register button positioned below the Login button. Attempts using the br tag have proven unsuccessful. What steps can be taken to achieve this layout?

htmlcss

Answer №1

Make sure to transfer the float property from your button element to the container div

<!doctype html>
  <html lang="en">
    <html>
      <style>
      body,
      html {
        margin: 0;
        height: 100%;
      }

      div{
      text-align:right;
      }

  .button {
    border: none;
    padding: 15px 25px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    width: 28vw;
    border-radius: 50px;
    position: relative;
    margin-right: 7vw;
  }

  .button:hover {
    background-color: green;
  }

  </style>

  <head>
    <title>HOME</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/home.css">
  </head>

  <body class=background>
  <div style="float: right;">
    <button class="button login">LOGIN</button>
  </div>
  <div style="float: right;">
    <button class="button register">REGISTER</button>
  </div>
  </body>

  </html>

Answer №2

It appeared that your intention was to center the buttons vertically below each other. To ensure responsiveness and achieve the desired outcome, I made a few minor adjustments:

Modified the button css -

1) Changed width to 30%

2) Updated min-width to 150px

3) Adjusted margin-right to 35% 

// calculation : (100% - 30%) / 2

body,
html {
  margin: 0;
  height: 100%;
}

.background {
  height: 100%;
  background-image: url(../images/home-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.button {
  border: none;
  padding: 15px 25px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  float: right;
  min-width: 150px;
  width: 30%;
  border-radius: 50px;
  position: relative;
  margin-right: 35%;
}

.button:hover {
  background-color: green;
}

.login {
  background-color: #DF6248;
  color: white;
  margin-top: 12vw;
}

.register {
  background-color: #DF6248;
  color: white;
  margin-top: 2vw;
}
<!DOCTYPE html>
<html>

<head>
  <title>HOME</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>

<body class=background>
  <button class="button login">LOGIN</button>
  <button class="button register">REGISTER</button>
</body>

</html>

Answer №3

.layer { 
  margin: 0 auto;
  display: table;
  margin-top: 34vh;
  /* Adjust the vh value between 30-40 for optimal display*/
}

#child1, #child2 { 
float: both; 
margin-left: 0px; 
margin-top: 0px;  
}


.background {
  height: 100%;
  background-image: url(../images/home-background.jpg) no-repeat;
  background-position: center;
  background-size: cover;
}

.button {
  border: none;
  padding: 15px 25px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  width: 28vw;
  border-radius: 50px;
  background-color: #DF6248;
  color: white;
}

.button:hover {
  background-color: green;
}
<!DOCTYPE html>
<html>
<head>
    <title>HOME</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>
<body>
<body class="background">
  <div class="layer">
  <div class="child">
    <button class="button child">LOGIN</button>
  </div>
  <br>
  <br>
  <div class="child">
    <button class="button child">REGISTER</button>
  </div>
</div>
</body>
</body>
</html>

Answer №4

Your .button class originally had float:right, which I replaced with display:block. Take a look at how float works here

body,
html {
  margin: 0;
  height: 100%;
}

.background {
  height: 100%;
  background-image: url(../images/home-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
}

.button {
  border: none;
  padding: 15px 25px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  display: block;
  width: 28vw;
  border-radius: 50px;
  margin-right: 7vw;
}

.button:hover {
  background-color: green;
}

.login {
  background-color: #DF6248;
  color: white;
  margin-top: 5vw;
}

.register {
  background-color: #DF6248;
  color: white;
  margin-top: 5vw;
}
<!DOCTYPE html>
<html>

<head>
  <title>HOME</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>

<body class=background>
  <button class="button login">LOGIN</button>
  <button class="button register">REGISTER</button>
</body>

</html>

Answer №5

Utilize display: block to ensure the button spans the entire width of its parent block, causing subsequent buttons to be moved to a new line. You can also use auto for horizontal margins to center your buttons.

body,
html {
  margin: 0;
  height: 100%;
}

.background {
  height: 100%;
  background-image: url(../images/home-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.button {
  border: none;
  display: block;
  padding: 15px 25px;
  margin: 2vw auto;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  width: 28vw;
  border-radius: 50px;
  position: relative;
}

.login {
  background-color: #DF6248;
  color: white;
}

.register {
  background-color: #DF6248;
  color: white;
}

.button:hover {
  background-color: green;
}
<!DOCTYPE html>
<html>

<head>
  <title>HOME</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>

<body class=background>
  <button class="button login">LOGIN</button>
  <button class="button register">REGISTER</button>
</body>

</html>

Answer №6

.layer { 
    margin: 10px 0 0 10px; 
    width:100%; 
    float: left;
}
.child { 
    float: both; 
    margin-left: 0px; 
    margin-top: 0px; 
}
<!DOCTYPE html>
    <html>
       <head>
          <title>HOME</title>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
       </head>
       <body>
          <div class="layer">
             <div class="child">1</div>
             <div class="child">2</div>
          </div>
       </body>
    </html>

Answer №7

One way to style buttons is by wrapping each one in a div

body,
html {
  margin: 0;
  height: 100%;
}

.background {
  height: 100%;
  background-image: url(../images/home-background.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.btn-container {
  text-align: center;
}

.button {
  border: none;
  padding: 15px 25px;
  text-align: center;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  float: none;
  clear: both;
  width: 28vw;
  border-radius: 50px;
  position: relative;
  margin-right: 7vw;
}

.button:hover {
  background-color: green;
}

.login {
  background-color: #DF6248;
  color: white;
  margin-top: 12vw;
}

.register {
  background-color: #DF6248;
  color: white;
  margin-top: 12vw;
}
<!DOCTYPE html>
<html>

<head>
  <title>HOME</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="../css/home.css">
</head>

<body class=background>
  <div class="btn-container">
    <button class="button login">LOGIN</button>
  </div>
  <div class="btn-container">
    <button class="button register">REGISTER</button>
  </div>
</body>

</html>

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

The navigation/hamburger icon vanishes after a click on a page link

I'm in the process of creating a single-page scrolling website. However, I am encountering an issue with the navigation bar. Specifically, when I click on a page link from the nav bar at screen widths less than 780px (when the hamburger icon appears), ...

javascripthtmlcss

What is the best way to arrange a collection of string numbers?

Below is the list of prices: var price = new Array("600", "250", "750", "400", "200", "500", "350", "800", "200", "700", "800", "700", "1", "800", "500", "25", "0", "1,000,000"); I am looking to organize and display them in ascending order. In response ...

javascriptarrayshtmlsorting

Clickable label for checkbox in Android browser is unresponsive

I've been experimenting with creating a responsive CSS menu using the checkbox hack Here's the HTML: <input type="checkbox" id="button" /> <label for="button" onclick>click / touch</label> <div> Change my color! </d ...

javascriptandroidjqueryhtmlcss

Ensure that when adjusting the height of a div, the content is always pushed down without affecting the overall layout of the page

My webpage contains a div element positioned in the middle of the content, with its height being adjustable through JavaScript code. I am seeking a way to manage the scrolling behavior when the height of the div changes. Specifically, I want the content t ...

javascripthtmlcss

Two background videos exhibit distinct behaviors when placed within the identical <video> tag

I have noticed a strange behavior with two videos I uploaded online. One, called "Bunny video," appears on top of the navigation bar while the other, named "Space video," is positioned below with an unknown black background (that I did not intentionally se ...

htmlcssvideo

What is preventing me from utilizing global variables in distinct HTML and JavaScript files?

I am facing a perplexing issue with my HTML files, specifically index.html and lobby.html. Within main.js, which is loaded in index.html, I attempt to load lobby.html using window.location.href. Despite trying various methods to define global variables i ...

javascriptjqueryhtml

jquery carousel slider dynamically append

I have been tasked with creating a dynamic carousel using jQuery AJAX, and my supervisor recommended that I utilize the .append() method. Below is the HTML code for my carousel: <div id="myCarousel"> </div> <div cla ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Regular expression for calculator input including a decimal point and negative sign

I'm in need of a regular expression to validate specific inputs: -0.12-12.56 -0.12+12.56 -0.12*12.56 -0.12/12.56 12.3--12.56 12.3+-12.56 12.3*-12.56 12.3/-12.56 -0.12--12.56 -0.12+-12.56 -0.12*-12.56 -0.12/-12.56 0.12-12.56 0.12+12.56 0.12*12.56 0.12 ...

angularjsnode.jshtml

Error: The absence of type definition

I am struggling to implement the functionality of an Add Question button, encountering an error message that reads: TypeError: form.questionText is undefined Can anyone point out where I went wrong? <script type="text/javascript"> fun ...

jqueryhtml

What is the best way to display the output of my Sudoku generator as an HTML table in Django?

Recently delving into Django, I've been working on creating a Sudoku web application. To generate the Sudoku puzzles, I developed a Python script named "Sudoku Generator.py" which produces matrices like this: [[3, 8, 2, 7, 5, 6, 1, 4, 9],[1, 4, 5, 2, ...

javascriptpythonhtmldjangosudoku

Reorganizing the order of Bootstrap columns in a single row for mobile devices

I am struggling with changing the order of Bootstrap columns on smaller devices. I need them to remain in a single row on all screen sizes, but I want them to display in a different order on phones. Specifically, I want the layout to look like this on desk ...

htmlcssbootstrap-4

Steps for turning off image maps on a slider for mobile users

Hello, I'm currently working on a website that has an image slider with image maps embedded in each image. Everything works perfectly on desktop, but when it comes to mobile versions, things start to get messy. I was wondering if there is any way to d ...

htmlcssimagemobiledictionary

Parsing HTML in PHP from a specified URL

I am a newcomer to PHP and have been trying to parse HTML with it. Despite my efforts, I have not been able to get any examples to work. I attempted using the "SimpleHTMLDom" library but am willing to try anything as long as clear instructions are provided ...

phphtmlparsing

Troubleshooting the malfunctioning AngularJS ui-view component

My ui-view isn't functioning properly, but no errors are being displayed. Can anyone help me figure out what I'm missing to make this work? This is the main template, index.html. <!DOCTYPE html> <html> <head> <meta charset= ...

javascripthtmlangularjsangular-ui-routerangular-routing

Is it possible to edit multiple classes simultaneously in Bootstrap?

After creating a div with the class container and adding 50px padding to the top, I am now ready to add another container using Bootstrap's CSS. Do I need to create a new class like container-2 to edit the new container's style or are there multi ...

htmlcssbootstrap-4

ways to invoke javascript function on body loading

I'm struggling to invoke a JavaScript function when the body loads. Currently, I have the function call on a button but cannot get it to work when added to the body load event. HTML: <body onload="bodyload();"> JavaScript: function bodyload( ...

javascriptjqueryhtml

Tips for preventing line breaks in CSS while adjusting zoom levels on a webpage

While adjusting the zoom level on the page, I noticed that the text breaks and separates onto another line. The first quick link appears fine, however there seems to be an issue with the second and third quick links as well as the lorem text. Apologies f ...

csszoomingline-breaks

Using jQuery to switch between different content divs

I'm trying to create a script that allows users to toggle between different posts, showing one at a time. However, I'm running into an issue where clicking on a new post doesn't hide the content of the previous one. How can I modify the code ...

jqueryhtmlcss

Manage several scrolls using overflow:auto

There are numerous popups on a page with the overflow:auto property. The structure is as follows - <div id="popup1"> <div>SomeHTMLSTRUC</div> <div>SomeHTMLSTRUC</div> <ul class="scroll"></ul> </div> ...

htmlcss

When utilizing the col-md class, the scope value in Angular-vs-repeat appears to be empty

When placed within a section containing the col-md class, the scope value will be empty. You can see an example of this in the provided Plunker linked in the comment section. The scope value becomes empty once the code snippet <div style="visibility:hi ...

javascriptangularjstwitter-bootstrapcss