Button titles not sitting next to each other-CodePudding

I want to hav two buttons next to each other. I am using the code below in external css but they wont sit next to one another (see image current output). How do i go about this?

Thanks for the help!

.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: left;
  width: 75%;
}
.shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: right;
  width: 75%;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Webpage</title>
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
  </head>
  <body>

    <p class="about about1">ABOUT</p>
    <p class="shop shop1">SHOP</p>

  </body>
</html>

Current output

CodePudding user response：

You are giving 75% width so it is not happening. Give it width auto.

.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  float: left;
  width: auto;
}
.shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  float: right;
  width: auto;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Webpage</title>
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
  </head>
  <body>

    <p class="about about1">ABOUT</p>
    <p class="shop shop1">SHOP</p>

  </body>
</html>

CodePudding user response：

You got your width spanning a total of 150% of the webpage when you can only see 100%. Hence, why they are not side-by-side. I would recommend just setting each element to a width: 50%; so they are each take-up half of the page. You can also use Bootstrap to solve this - using two col-6's.

.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: left;
  width: 50%;
}
.shop {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy; copperplate;
  float: right;
  width: 50%;
  }

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Webpage</title>
    <link rel="stylesheet" href="indexstyle.css" type="text/css">
  </head>
  <body>

    <p class="about about1">ABOUT</p>
    <p class="shop shop1">SHOP</p>

  </body>
</html>

CodePudding user response：

The most reliable way to get buttons to display next to each other is to use a wrapper element. This creates a block-level layout boundary so you only have to focus on positioning the buttons inside the parent element.

For Example:

.shop,
.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy, copperplate;
  width: 50%;
  float: left;
}

<div class="button-wrapper">
  <button class="about">ABOUT</button>
  <button class="shop">SHOP</button>
</div>

This change creates a block-level element that wraps the buttons, sets the button widths to 50% so each takes up half the space of the parent container, and floats both buttons to the left so they will display edge to edge.

A better option might be flexbox, which is designed for creating linear layouts in CSS. In general flexbox has replaced floats for positioning layout elements, while floats are usually reserved for positioning elements (like images) in the flow of content.

.button-wrapper {
  display: flex;
  justify-content: space-around;
}

.shop,
.about {
  color: lightpink;
  text-align: center;
  font-size: 400%;
  font-family: fantasy, copperplate;
  flex-basis: calc(50% - 1rem);
}

<div class="button-wrapper">
  <button class="about">ABOUT</button>
  <button class="shop">SHOP</button>
</div>

Here I've removed the float property. You can apply display: flex to the parent button wrapper. This will place all the child elements (buttons) on along a single horizontal line. I've also added layout options like "space-around" which puts equal space on either side of each child element. For the buttons themselves, I've used flex-basis: calc(50% - 1rem); so that they display "half minus 1rem" of the total parent width to allow for some gutter space around the buttons.

You can learn more about flexbox here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/