How to align buttons with html and css? - html

Question

I wrote a little html page that contains some buttons. What I want to do is to have them look like this :
I'm not good at all at css, I tried some combination but what I get is to have them "below the blue line" like this :
Here is my html code :
<div class="module form-module">
<div class="flex-container">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
</div>
You can find my css code in that plunker : https://plnkr.co/edit/sCcBBFfWRiCwGz8hs8oR?p=catalogue
Can you please help me to fix this little problem in html ?

Answer 1

CSS changes:
.form-module {
border-bottom: 5px solid #33b5e5;
position: relative;
background: #ffffff;
width: 100%;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.flex-container > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
Changes expalined:
The blue line is a border, and was set on the button's parent container. It was set to top when you wanted it to be on the bottom, so that's first change.
Then you had padding, which was separating the buttons from the edges of the container, that's second change, set it to 0px.
Finally, both the table and each button had a 1px border which would separate it from the edges of the container, third change was setting those borders to 0px.
Small suggestion:
In case you're not aware: it's really helpful to use browser inspector to better understand what's going on with CSS. Also, if you don't wish to make everything from scratch, I'd recommend you have a look at Bootstrap, it's quite easy and might save you a bunch of time.
Good luck.
In case it's useful, here's the complete CSS:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
table {
border-spacing:0px;
}
td {
padding:0px;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #33b5e5;
}
.pen-title span a {
color: #33b5e5;
font-weight: 600;
text-decoration: none;
}
/* Form Module */
.form-module {
position: relative;
background: #ffffff;
width: 100%;
border-bottom: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.form-module .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.form-module .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
}
.form-module .form:nth-child(2) {
display: block;
}
.form-module h2 {
margin: 0 0 20px;
color: #33b5e5;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.form-module table {
width: 100%
}
.form-module input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.form-module button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module button:hover {
background: #178ab4;
}
.form-module select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag button {
background: white;
color: #178ab4;
}
.flag button:hover {
background: white;
border: 20px;
border-color: #178ab4;
}
.flag {
cursor: pointer;
background: white;
width: 100%;
border: 0;
padding: 10px 15px;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a {
cursor: pointer;
background: white;
width: 100%;
border: 0;
color: #33b5e5;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a :hover {
background: white;
}
.form-module .cta {
background: #f2f2f2;
width: 100%;
padding: 15px 40px;
box-sizing: border-box;
color: #666666;
font-size: 12px;
text-align: center;
}
.form-module .cta a {
color: #333333;
text-decoration: none;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.flex-container > * {
padding: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.article {
text-align: left;
}
.detail button {
width: 120px
}
.detail table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 100%
}
.search table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 70%
}
.search button {
width: 120px
}
.search input {
outline: none;
width: 90%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.search select {
cursor: pointer;
width: 90%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.resultSearch table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 80%
}
.dropbtn {
outline: none;
border:1;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
}
#myInput {
border-box: box-sizing;
background-image: url('searchicon.png');
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
outline: none;
width: 100%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
#searchbox
{
width: 35px;
}
#media all and (min-width: 768px) {
.nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}
.article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}
footer {-webkit-order:3;order:3;}
}
.newUser button {
width: 120px
}
.newUser table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%
}
.return table{
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%;
}
.returnCheckBox input {
align: left;
width:0%;
}
.invoiceListTable table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 90%
}
.sessionInfo table {
border-collapse: separate;
border-spacing: 5px 10px;
width: 100%;
align: right;
}
.sessionInfo {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.sessionInfo > * {
padding: 15px;
-webkit-flex: 1 100%;
flex: 1 100%;
align: right;
}
.sessionInfo {
position: relative;
background: #ffffff;
width: 20%;
border-top: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.sessionInfo .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.sessionInfo .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.sessionInfo .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
align:right;
}
UPDATE:
You mentioned the buttons should be outside and above the form-module, so the html needs to be changed and not just the css. We removed the flex-container div which was nested inside form-module div and placed it after this container is closed. Since the buttons were getting their layout properties from .form-module's style, it was necessary to create a new class "buttons". Basically now form-module and buttons are in different containers and with separated style properties.
To understand how container blocks work:
http://www.w3schools.com/html/html_blocks.asp
html:
<div class="flex-container buttons">
<article class="article">
<table>
<tr>
<td>
<button>Configurations</button>
</td>
<td>
<button>Create User </button>
</td>
<td>
<button>Update User</button>
</td>
<td>
<button>Create Group</button>
</td>
<td>
<button>Update Group</button>
</td>
</tr>
</table>
</article>
</div>
<div class="module form-module">
</div>
changed css:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
width: 100%;
border-spacing:0px;
}
.buttons td {
padding:0px;
}
.buttons input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.buttons button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons button:hover {
background: #178ab4;
}
.buttons select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
complete css:
body {
background: #e9e9e9;
color: #666666;
font-family: 'RobotoDraft', 'Roboto', sans-serif;
font-size: 14px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.buttons table {
width: 100%;
border-spacing:0px;
}
.buttons td {
padding:0px;
}
.buttons input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.buttons button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.buttons button:hover {
background: #178ab4;
}
.buttons select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
/* Pen Title */
.pen-title {
padding: 50px 0;
text-align: center;
letter-spacing: 2px;
}
.pen-title h1 {
margin: 0 0 20px;
font-size: 48px;
font-weight: 300;
}
.pen-title span {
font-size: 12px;
}
.pen-title span .fa {
color: #33b5e5;
}
.pen-title span a {
color: #33b5e5;
font-weight: 600;
text-decoration: none;
}
/* Form Module */
.form-module {
position: relative;
background: #ffffff;
width: 100%;
border-top: 5px solid #33b5e5;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
margin: 0 auto;
align: right;
}
.form-module .toggle {
cursor: pointer;
position: absolute;
top: -0;
right: -0;
background: #33b5e5;
width: 30px;
height: 30px;
margin: -5px 0 0;
color: #ffffff;
font-size: 12px;
line-height: 30px;
text-align: center;
}
.form-module .toggle .tooltip {
position: absolute;
top: 5px;
right: -65px;
display: block;
background: rgba(0, 0, 0, 0.6);
width: auto;
padding: 5px;
font-size: 10px;
line-height: 1;
text-transform: uppercase;
}
.form-module .toggle .tooltip:before {
content: '';
position: absolute;
top: 5px;
left: -5px;
display: block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid rgba(0, 0, 0, 0.6);
}
.form-module .form {
display: none;
padding: 40px;
}
.form-module .form:nth-child(2) {
display: block;
}
.form-module h2 {
margin: 0 0 20px;
color: #33b5e5;
font-size: 18px;
font-weight: 400;
line-height: 1;
}
.form-module table {
width: 100%
}
.form-module input {
outline: none;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-weight: 400;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module input:focus {
border: 1px solid #33b5e5;
color: #333333;
}
.form-module button {
cursor: pointer;
background: #33b5e5;
width: 90%;
border: 0;
padding: 10px 15px;
color: #ffffff;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.form-module button:hover {
background: #178ab4;
}
.form-module select {
cursor: pointer;
width: 85%;
height:80%;
padding: 10px 15px;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag button {
background: white;
color: #178ab4;
}
.flag button:hover {
background: white;
border: 20px;
border-color: #178ab4;
}
.flag {
cursor: pointer;
background: white;
width: 100%;
border: 0;
padding: 10px 15px;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a {
cursor: pointer;
background: white;
width: 100%;
border: 0;
color: #33b5e5;
border-color: #178ab4;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
}
.flag a :hover {
background: white;
}
.form-module .cta {
background: #f2f2f2;
width: 100%;
padding: 15px 40px;
box-sizing: border-box;
color: #666666;
font-size: 12px;
text-align: center;
}
.form-module .cta a {
color: #333333;
text-decoration: none;
}
.flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align: right;
}
.flex-container > * {
padding: 0px;
-webkit-flex: 1 100%;
flex: 1 100%;
}
.dropbtn {
outline: none;
border:1;
width: 80%;
border: 1px solid #d9d9d9;
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd}
.show {display:block;}
ul{
list-style-type:none;
width:500px;
}
li{
width:33%;
text-align:center;
float:left;
border-bottom:2px solid #33b5e5;
}

Answer 2

Maybe instead of a 'table' use a 'list' html element like ul or li.
plunker
New HTML:
<div class="module form-module">
<div class="flex-container">
<article class="article">
<ul>
<li>
<button>Configurations</button>
</li>
<li>
<button>Create User </button>
</li>
<li>
<button>Update User</button>
</li>
</ul>
</article>
</div>
</div>
and add the following CSS:
ul{
list-style-type:none;
width:500px;
}
li{
width:33%;
text-align:center;
float:left;
border-bottom:2px solid #33b5e5;
}