How can I better format this div with buttons in it? - html

Question

I've got three div's going here. One's a container then the other 2 are in place for some buttons! But it just doesn't look right. I'm not quite sure how to fix it
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
HTML:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left; padding-left: 325px;">
<p style="padding-left: 72px;">Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: left; padding-left: 125px;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
jsfiddle: https://jsfiddle.net/3ar1L0zy/1/
And what i'm trying to achieve in paint form!

Answer 1

I would move away from using floats - css has moved on sufficiently so you shouldn't need to use them anymore.
Use flex instead:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.divButton {
width: 100%; /* you don't really need this - divs are block elements which are 100% by default */
background-color: #e4e4e4;
padding: 0 20px 5px 20px;
box-sizing: border-box; /* as you have set the width, you need this to stop the div being 100% + 40px wide */
display:flex; /* this will align items in a row by default */
flex-wrap:wrap; /* this allows the content to wrap to multiple rows */
justify-content:space-between; /* this will push any content to either side of the row */
}
.divButton > p {
width:100%; /* make this take up full row */
}
.divButton > div {
text-align:center; /* use this to centre text - not padding */
}
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div>
<p>Centered text above button</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<p>TEXT</p>
<button class="button">TEXT</button>
</div>
</div>
One other tip I would give you is try not to use inline styles - they become very hard to maintain and make it harder to debug too (and cause a lot larger files as you have to repeat code for styles instead of just using a class that can be used multiple times but programmed once)

Answer 2

Instead of use float: left on both div, you can use float right on the right one and remove the padding-left you set:
<div class="divButton">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<!--2 buttons "centered"-->
<div style="float: left;">
<p style="padding-left: 72px;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<!--add spacing to move away from 2 buttons-->
<div style="float: right;">
<p style="padding-left: 40px;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/13/
you can achieve this too by using flexbox too. (better solution in my opinon)

Answer 3

HTML code:
<div class="divButton">
<h3 style="text-align: center; padding-top: 15px; color: black;">TEXT!</h3>
<!--2 buttons "centered"-->
<div class="divText">
<p style="padding-left: 72px;">TEXT</p>
<p style="padding-left: 40px;">TEXT</p>
</div>
<!--add spacing to move away from 2 buttons-->
<div>
<div class="divButtons">
<div>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
<button class="button">TEXT</button>
</div>
</div>
</div>
CSS code:
.button {
display: inline-block;
padding: 20px 30px;
font-size: 12px;
cursor: pointed;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #AB0002;
border: none;
border-radius: 15px;
}
.button:hover {
background-color: #880002;
}
.divButton {
height: 100%;
width: 100%;
background-color: #e4e4e4;
display: inline-block;
padding-bottom: 5px;
}
.divText {
display: flex;
justify-content: space-around;
}
.divButtons {
display: flex;
justify-content: space-around;
}

Answer 4

<div class="divButton" style="text-align: center;">
<p style="text-align: center; padding-top: 15px; color: black;">TEXT!</p>
<div style="display: inline-block;">
<!--add spacing to move away from 2 buttons-->
<div style="float: right; display: inline-block; padding-left: 125px;">
<p style="text-align: center;">TEXT</p>
<button class="button" style="float: right;">TEXT</button>
</div>
<!--2 buttons "centered"-->
<div style="display: inline-block;">
<p style="text-align: center;">TEXT</p>
<button class="button">TEXT</button>
<button class="button">TEXT</button>
</div>
</div>
</div>
https://jsfiddle.net/3ar1L0zy/85/

Answer 5

I would recommend flexbox
.parent{
background: tomato;
width: 400px;
padding: 30px;
display: flex;
flex-direction: column;
}
.header{
background: yellow;
text-align: center
}
.body{
background: green;
width: 100%;
display: flex;
}
.body-item{
background: pink;
width: 50%;
text-align: center;
padding: 10px;
}
.blue{
background: blue; /* to make it easier to see */
}
.buttons{
display: flex;
flex-wrap: wrap; /* wrap items onto multiple lines if needed, from top to bottom*/
justify-content: space-evenly; /* items are distributed so that the spacing between any two items (and the space to the edges) is equal */
}
<div class="parent">
<h3 class="header">HEADER TEXT</h3>
<section class="body">
<div class="body-item">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
<button>Button</button>
</div>
</div>
<div class="body-item blue">
<div class="text">Text</div>
<div class="buttons">
<button>Button</button>
</div>
</div>
</section>
</div>