3 DIVs, 1 Container, Centrally aligned horizontally - html

Question

I've got three DIVs that I've put into a container DIV.
What I want is as follows:
Here's where I'm up to:
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top: 30px;
margin-bottom: 30px;
}
#leftdiv {
float: left;
padding: 0 20px;
/*margin:20px 0;*/
position: relative;
width: 25%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align: middle;
width: 100%;
text-align: center;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height: 40px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv">
<p id="light-table-paragraph">Left</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Middle</p>
</div>
<div id="leftdiv">
<p id="light-table-paragraph">Right</p>
</div>
</div>
</div>
Please can someone help tell me where I'm going wrong?
Thanks!
Scott

Answer 1

set the div the contains the three small divs display:flex and give it 75% width of the container, then set space around the content as follow:
#leftdiv {
/*float: left;*/
padding:0 20px;
/*margin:20px 0;*/
position:relative;
/* edits */
width:33.33%;
flex-basis: 25%;
}
#leftdivcontainer {
vertical-align:middle;
text-align: center;
/* edits */
width:75%;
display: flex;
margin: 0px auto;
justify-content: space-around;
}
#light-table-paragraph {
font-family: 'Droid Serif';
font-size: 20px;
color: #2e2e2e;
text-align: left;
line-height:40px;
}
#light-table {
background-color: #e2e2e2;
width: 100%;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 40px;
padding-right: 40px;
text-align: left;
margin-top:30px;
margin-bottom: 30px;
}
<div id="light-table">
<h3 id="light-table-head-style">content.</h3>
<div id="leftdivcontainer">
<div id="leftdiv"><p id="light-table-paragraph">Left</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Middle</p></div>
<div id="leftdiv"><p id="light-table-paragraph">Right</p></div>
</div>
</div>

Answer 2

Here's how I would do it.
Give each .leftdiv (indeed this should be a class, id's are unique) 33% of total viewport width:
.leftdiv {
float: left;
width: 33%;
}
and center each paragraph inside these divs, give it 75% width:
.leftdiv p {
display: block;
width: 75%;
margin: 0 auto !important; /* you won't need !important if your code is well structured */
}
This is a cleaner solution, as you'll notice there is no horizontal scroll present.
Here is a codepen.
Also, you need to clear your parent div #leftdivcontainer (did that as well).
Hope this helps.