Question 174007 in Html Question posted in
Some basic documentation can be found here.

Why are my 5 HTML buttons not displaying in one row when set to 20% max width?

My 5 HTML buttons are set to 20% max width and should all fit in 1 row, but it’s displaying in 2 rows. Why?

I have 2 beginner questions.

I am new to Javascript/CSS/HTML, and have learned a few basics of coding in Python.

I made "index.html" for the main code, with a "style.css" file and "main.js" file made as empty placeholders for the future. I also made "page1.html", "page2.html", "page3.html", "page4.html", "page5.html" for the 5 main pages of the app that I am making. I make 5 buttons on the main "index.html" page, that take the user to the 5 different pages based on which button they click.

QUESTION 1:

Below is my code for "index.html" which is mostly working. But why are the 5 buttons not displaying all in a single row at the bottom of the screen? They should each have width set to 20% of the screen’s max width, so all 5 should fit perfect. Instead, the 5th button gets bumped down to a 2nd row. If I change their widths to 19% of max width, they all fit, but it should work with them at 20% of max width, so why is it not all fitting when the 5 buttons are set at 20% of max width?

Code from "index.html" listed here:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
.bottom-buttons {
  position: fixed;
  bottom: 0;
  width: 100%;
}
.bottom-buttons button {
  width: 20%;
  height: 5%;
}
</style>

</head>
<body>
    <div class="bottom-buttons">
        <a href="page1.html"><button>Button 1</button></a>
        <a href="page2.html"><button>Button 2</button></a>
        <a href="page3.html"><button>Button 3</button></a>
        <a href="page4.html"><button>Button 4</button></a>
        <a href="page5.html"><button>Button 5</button></a>
      </div>

</body>
</html>

QUESTION 2:

If I cut all of the lines of code in between and , and paste it into "style.css" it causes the button layout to be undone. I thought you could choose to put CSS code in its own "style.css" file, or, in the main HTML file in between and ?

Is this true if certain criteria are met? What would I have to change to make it work the same with the CSS code swapped into the CSS file instead? Trying to get a feel for the right and wrong way to do things down the road.

Thanks.

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Adding this to the "index.html" section allowed my CSS code to be swapped to the "style.css" file:

    <link rel="stylesheet" href="styles.css">

    And the button spacing issue was resolved by changing my button code in "style.css" to this:

    .bottom-buttons {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0px;
}

.bottom-buttons button {
    font-size: 14px;
    width: 20%;
    height: 5%;
}

    Thanks to all who helped!


  2. 0

    The reason that your buttons are wrapping to the second line is because when you are setting width, the width property does not include padding, margins or borders. One easy fix is the set the width of the buttons to 1fr (1 fraction of the space remaining):

    .bottom-buttons button {
  width: 1fr;
  height: 5%;
}

    This will take into account the properties I mentioned above, while allowing you to dynamically add and remove buttons without breaking the layout. Another way you could do this is by using grid layouts and flexboxes, the latter being my preferred method to do this.

    As for your second question, I have limited information but in order for styles on a second css document to take affect, you have to link them in the head. You can do this by putting this code into the head of your main html document.

    <link rel="stylesheet" href="./style.css">

    If you do not do this, then the HTML code doesn’t even know that your custom css styles even exist, and as a result doesn’t affect the changes.

    Login or Signup to reply.
  3. 0

    input element’s like <button> by default have their own browser styles that overlap with the styles you’re setting (buttons usually have border and padding by default)

    check out https://css-tricks.com/overriding-default-button-styles/

    you might try setting the width on the <a> element instead

    .bottom-buttons a {
  width: 20%;
  height: 5%;
}

    for Q2, you can definitely break out the styles into their own file

    add the contents within your <style> tags into a styles.css file and reference that file in your html with <link rel="stylesheet" href="style.css">

    Login or Signup to reply.
  4. 0

    Question 1

    Default Behaviour Of Browsers

    By default browser always add spaces between some elements, including buttons because of carriage returns, new lines or white spaces. Dont worry this happens when our code editor’s formatter format the code to increase readabilty. In your case the newlines characters added between each <a></a> tag. Demonstration without formatting the code works well:

    <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .bottom-buttons {
                position: fixed;
                bottom: 0;
                width: 100%;
                /* font-size: 0px; */
            }

            .bottom-buttons button {
                /* font-size: 14px; */
                width: 20%;
                height: 5%;
            }
        </style>
    </head>

    <body>
        <div class="bottom-buttons"><a href="page1.html"><button>Button 1</button></a><a href="page2.html"><button>Button 2</button></a><a href="page3.html"><button>Button 3</button></a><a href="page4.html"><button>Button 4</button></a><a href="page5.html"><button>Button 5</button></a>
        </div>
    </body>
</html>

    What If I Want To Format The Code

    Dont worry we have solution for it you just have to set the font size of the parent element to zero then specify the font size of the buttons and boom. Just like that:

    .bottom-buttons {
    position: fixed;
    bottom: 0;
    width: 100%;
    font-size: 0px;
}

.bottom-buttons button {
    font-size: 14px;
    width: 20%;
    height: 5%;
}

    Have a look after doing this:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .bottom-buttons {
      position: fixed;
      bottom: 0;
      width: 100%;
      font-size: 0px;
    }
    
    .bottom-buttons button {
      font-size: 14px;
      width: 20%;
      height: 5%;
    }
  </style>
</head>

<body>
  <div class="bottom-buttons">
    <a href="page1.html"><button>Button 1</button></a>
    <a href="page2.html"><button>Button 2</button></a>
    <a href="page3.html"><button>Button 3</button></a>
    <a href="page4.html"><button>Button 4</button></a>
    <a href="page5.html"><button>Button 5</button></a>
  </div>
</body>

</html>

    Not The Part Of Answer But Advice

    You can see in above snippet there are no spaces between button but if you try to give same margin to the button. Again same issue you will face. Now i will suggest to use flexbox. It is a great tool to handle layouts. You can get more details about it here. After using flexbox you can give margin of your choice to seprate the buttons and code will look like:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .bottom-buttons {
      position: fixed;
      bottom: 0;
      width: 100%;
      display: flex;
    }
    
    .bottom-buttons a {
      width: 20%;
      margin: 0 10px;
    }
    
    .bottom-buttons button {
      width: 100%;
    }
  </style>
</head>

<body>
  <div class="bottom-buttons">
    <a href="page1.html"><button>Button 1</button></a>
    <a href="page2.html"><button>Button 2</button></a>
    <a href="page3.html"><button>Button 3</button></a>
    <a href="page4.html"><button>Button 4</button></a>
    <a href="page5.html"><button>Button 5</button></a>
  </div>
</body>

</html>

    Question 2

    Yes, if you have to use the code for multiple html files, it is a good approach to do it in a separate file. Here is a good detail how it can be done.

    1. Put the styles in separate file i.e in styles.css
    2. Link the styles with html with following line <link rel="stylesheet" href="styles.css">

    More details about linking styles

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search