Divide page in two columns and align them in HTML - html

Question

ImageI would like to display the page in two columns below the heading and center align the buttons the way it is.
I do not understand if I have missed any divs here?
I have been trying to do it but its not showing up the way i expected.
<div>
<div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
<span>Help us improve Customer Support</span>
</div>
<table>
<tr>
<td width="50%" class="divText slds-p-bottom--medium leftBtn" >Tell us what you think<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Provide feedback</span>
</button>
</div>
</td>
<td width="50%" class="vertical-liness divText slds-p-bottom--medium rightBtn" >Collaborate with our team<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Get Involved</span>
</button>
</div>
</td>
</tr>
</table>
</div>
.THIS .vertical-liness
{
border-left: 2px solid red;
}
.THIS .leftBtn{
padding-left:115px;
float:right;
}
.THIS .rightBtn{
padding-left:175px;
}
.THIS {
background-color: #f4f7f7; /* ibm-cool-white-3; */
border-top: 1px solid #d0dada; /* ibm-gray-10 */
font-size: 20px;
font-weight: normal;
color: #272727; /* ibm-gray-90 */
}
.THIS .divText{
font-size: 16px;
color: #272727; /* ibm-gray-90 */
}

Answer 1

I simplified your markup to show an example. You can create a couple of flex parents and use their centering properties to recreate this.
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.col {
flex-direction: column;
}
.button {
padding: 0 3em;
text-align: center;
}
.button1 {
border-right: 1px solid #ccc;
}
header {
margin: 0 0 .5em;
}
<div class="flex col">
<header>
Help us improve Customer Support
</header>
<div class="buttons flex">
<div class="button button1">
<div>
Tell us what you think
</div>
<button>Provide feedback</button>
</div>
<div class="button button2">
<div>
Tell us what you think
</div>
<button>Provide feedback</button>
</div>
</div>
</div>

Answer 2

You need to create two divs in your body and place the content inside each of them.
body {
width: 500px;
height: 500px;
}
.left, .right {
float: left;
width: 50%;
height: 100%;
}
.left {
background-color: red;
}
.right {
background-color: blue;
}
<div class="left">
<p>Left column</p>
</div>
<div class="right">
<p>Right column</p>
</div>
https://codepen.io/anon/pen/QgLKzQ

Answer 3

float: left; with width: 50%; is the key here.
Be careful that you need either content inside your div like the below example, either give them an height (eg. CSS: .left-float { height: 500px; }
Be careful either that floating elements will break the flow.
You will need to clear float with the next elements:
https://css-tricks.com/almanac/properties/c/clear/
CSS :
.left-float {
width:50%;
float:left;
}
HTML :
<div>
<div class="left-float" style="background-color:green;">
left div
</div>
<div class="left-float" style="background-color:red;">
right div
</div>
</div>
So, with your code... Ugh, put me off this <table> element please !
They are designed to display tabular data and not to provide a way of positioning elements. In your case you do not display tabular data.
An example of how it could be :
https://jsfiddle.net/12fd30bf/
HTML:
<div>
<div class="slds-p-top--x-large slds-text-align--center slds-p-bottom_small" width="100%">
<span>Help us improve Customer Support</span>
</div>
<div class="left-float">
Tell us what you think<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Provide feedback</span>
</button>
</div>
</div>
<div class="left-float">
Collaborate with our team<br/>
<div class="slds-text-align--center slds-p-top--small slds-p-bottom--large slds-p-top--medium">
<button class="slds-button slds-button--neutral">
<span class="btn-feedback">Get Involved</span>
</button>
</div>
</div>
</div>
CSS :
.left-float {
width:50%;
float:left;
}