Having a bad time with CSS and button aligment

Question

I'm having quite some trouble trying to align buttons, want to align them vertically and horizontally (2 columns, 3 rows).

Here's how I've designed it in Photoshop:

And here's how it looks:

Initially the Foreground was centered and looked exactly like on the Design, but the buttons were not aligned properly, so a friend told me I should use a table to fix it, it did, but now I can't align the buttons, any tips?

Html and CSS below:

.Background {
  background: #024068;
  position: absolute;
  left: 0px;
  top: 0px;
  width: auto;
  height: auto;
  z-index: 1;
}

.Foreground {
  background: #03609b;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
  width: 50%;
  margin: auto;
  height: 1153px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.table {
  align-content: inherit;
}

.Button.ButtonTxt {
  background: #5fa4d0;
  border: none;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease 0s;
  width: 331px;
  height: 159px;
  opacity: 1;
  z-index: 3;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}

.Button:hover {
  opacity: 0.75;
}

.Button:active {
  background-color: #1E5B82;
  transition: none;
}

<body class="Background">
  <div class="Foreground">
    <table class="table">
      <tr>
        <td><input class="Button ButtonTxt" type="button" value="Button1"></td>
        <td><input class="Button ButtonTxt" type="button" value="Button2"></td>
      </tr>
      <tr>
        <td><input class="Button ButtonTxt" type="button" value="Button3"></td>
        <td><input class="Button ButtonTxt" type="button" value="Button4"></td>
      </tr>
      <tr>
        <td><input class="Button ButtonTxt" type="button" value="Button5"></td>
        <td><input class="Button ButtonTxt" type="button" value="Button6"></td>
      </tr>
    </table>
  </div>
</body>

Why are you using a table? Doesn't look like tabular data. If you're cool using flexbox, you should use flex instead of the table, it will make things a lot easier. — Michael Coker, Mar 09 '17 at 21:08
Possible duplicate of [How to Create Grid/Tile View with CSS?](http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-with-css) — domsson, Mar 09 '17 at 21:28
What's the purpose of the absolute positioning on `.Background`? Seems unnecessary other than setting the background color. — hungerstar, Mar 09 '17 at 21:34

score 3 · Accepted Answer · answered Mar 09 '17 at 22:14

I have a solution without tables for you, using flex. I added container elements for the rows (pairs of buttons in one line) and made everything be DIVs. View it at full page size.

.Background {
  background: #024068;
}

.Foreground {
  background: #03609b;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.75);
  width: 50%;
  margin: auto;
  height: 1153px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rowcontainer {
  display: flex;
  justify-content: space-between;
  margin-bottom: 100px;
  padding: 0 10px;
}

.Button.ButtonTxt {
  background: #5fa4d0;
  border: none;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease 0s;
  width: 331px;
  height: 159px;
  font-size: 50px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 159px;
  text-align: center;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}

.Button:hover {
  opacity: 0.75;
}

.Button:active {
  background-color: #1E5B82;
  transition: none;
}

<body class="Background">
  <div class="Foreground">
    <div class="rowcontainer">
      <div class="Button ButtonTxt" type="button" value="Button1">Button1</div>
      <div class="Button ButtonTxt" type="button" value="Button2">Button2</div>
    </div>
    <div class="rowcontainer">
      <div class="Button ButtonTxt" type="button" value="Button3">Button3</div>
      <div class="Button ButtonTxt" type="button" value="Button4">Button4</div>
    </div>
    <div class="rowcontainer">
      <div class="Button ButtonTxt" type="button" value="Button5">Button5</div>
      <div class="Button ButtonTxt" type="button" value="Button6">Button6</div>
    </div>
  </div>
</body>

Thank you very much, as other users said, I decided to ditch the tables and use your approach instead. It works flawlessly, didn't even know about this, definitely going to look more into it! Thank you once again! — Azazel, Mar 09 '17 at 23:36

Larpee · Answer 2 · 2017-03-09T21:56:34.797

First of all: The table tag is a method to store tabular data, not to lay out a page, and, therefore, it should not be used in such way.

Here's another way for you to accomplish what you want:

Add this in your CSS:

.left-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: left;
    height: 200px;
}

.right-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    float: right;
    height: 200px;
}

And change your HTML to this:

<body>
<div class="Foreground">
    <div class="left-side">
        <input class="Button ButtonTxt" type="button" value="Button1">
        <input class="Button ButtonTxt" type="button" value="Button2">
        <input class="Button ButtonTxt" type="button" value="Button3">
    </div>
    <div class="right-side">
        <input class="Button ButtonTxt" type="button" value="Button4">
        <input class="Button ButtonTxt" type="button" value="Button5">
        <input class="Button ButtonTxt" type="button" value="Button6">
    </div>
</div>

This creates two divs, one for the left buttons, one for the right ones. Then it styles them using flex to lay them out like a column. If you want the buttons to be closer or further apart from each other, change the height property of .left-side and .right-side in the CSS.

Let me know if this suits your needs

Ended up using Johannes' approach instead as it was easier for me to understand, although with you, I've learned I should not use tables to lay out a page, so I thank you for that too, and for trying to help me out! — Azazel, Mar 09 '17 at 23:37

Maborukoje Adebayo · Answer 3 · 2017-03-09T22:00:31.380

Few Changes I made to your code (if you want to continue the use of tables here).

I added a cell spacing to the td which you can adjust to suit your taste.
I also reduce the font size of your button text (It was quite big)
I increased the ratio of the foreground to 80% (you can adjust this to your taste as well)

.Background {
  background: #024068;
}
.Foreground {
  background: #03609b;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
  width: 80%;
  margin:auto;
  height: 1153px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}
table {
    align-content: inherit;
}
table.table td {
  margin: 10px 10px 10px 10px;
}
table.table {
  border-collapse: separate;
  border-spacing: 50px;
  *border-collapse: expression('separate', cellSpacing = '15px');
  }

.Button.ButtonTxt {
  height: 50px;
  width: 100px;
  color: red;
  border: none;
  background: #5fa4d0;
  opacity: 1;
  z-index: 3;
  font-size: 16px;
  font-family: "Bebas Neue";
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
  box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
  transition: all 0.3s ease 0s;
}
.Button:hover{
    opacity: 0.75;
}
.Button:active{
    background-color: #1E5B82;
    transition: none;
}

<body class="Background">
 <div class="Foreground">
  <table class="table">
   <tr>
    <td><input class="Button ButtonTxt" type="button" value="Button1"></td>
    <td><input class="Button ButtonTxt" type="button" value="Button2"></td>
   </tr>
   <tr>
    <td><input class="Button ButtonTxt" type="button" value="Button3"></td>
    <td><input class="Button ButtonTxt" type="button" value="Button4"></td>
   </tr>
   <tr>
    <td><input class="Button ButtonTxt" type="button" value="Button5"></td>
    <td><input class="Button ButtonTxt" type="button" value="Button6"></td>
   </tr>
  </table>
 </div>
</body>

score 1 · Answer 4 · answered Mar 09 '17 at 21:57

your code is way prom being perfect, I'd suggest use flexbox instead of table. However if you want to still use table here you have (just adjusted your code to fit PS mockup)

.Background {
  background: #024068;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: auto;
  z-index: 1;
  display: flex;
  justify-content: center;

}
.Foreground {
  background: #03609b;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.75);
  height: 710px;
  width: 600px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.table{
    align-content: inherit;
    border-spacing: 130px 80px;
    border-collapse: separate;
}
.Button.ButtonTxt {
  background: #5fa4d0;
  border: none;
  -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
  box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.45);
  transition: all 0.3s ease 0s;
  width: 212px;
  height: 100px;
  opacity: 1;
  z-index: 3;
  font-size: 50px;
  font-family: "Libre Franklin";
  font-size: 22px;
  color: rgb(255, 255, 255);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
}
.Button:hover{
    opacity: 0.75;
}
.Button:active{
    background-color: #1E5B82;
    transition: none;
}


<head>  <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"></head>
<body class="Background">

    <div class="Foreground">
        <table class="table">
            <tr>
                <td><input class="Button ButtonTxt" type="button" value="Button1"></td>
                <td><input class="Button ButtonTxt" type="button" value="Button2"></td>
            </tr>
            <tr>
                <td><input class="Button ButtonTxt" type="button" value="Button3"></td>
                <td><input class="Button ButtonTxt" type="button" value="Button4"></td>
            </tr>
            <tr>
                <td><input class="Button ButtonTxt" type="button" value="Button5"></td>
                <td><input class="Button ButtonTxt" type="button" value="Button6"></td>
            </tr>
        </table>
    </div>
</body>

Having a bad time with CSS and button aligment

4 Answers4