Divide page in two columns and align them in 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 */
    }

post the complete html and css for the problem you're trying to solve. see how to create a [mcve] — Michael Coker, Jun 01 '17 at 14:25
There is **no** CSS method of aligning elements that do not share a parent. — Paulie_D, Jun 01 '17 at 14:29

score 2 · Accepted Answer · answered Jun 01 '17 at 14:59

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>

It worked as expected, now I see what I did, I haven't wrapped the headings properly. Thanks much!!! — user5495947, Jun 01 '17 at 15:11

score 0 · Answer 2 · answered Jun 01 '17 at 14:33

0

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

answered Jun 01 '17 at 14:33

Fiffe

1,196
2
13
23

Thanks I was having issues wrapping up the button. I was able to divide the page in two columns. – user5495947 Jun 01 '17 at 15:13

remi13131 · Answer 3 · 2017-06-01T15:14:48.453

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;
}

Thanks I was having issues wrapping up the button. I was able to divide the page in two columns. — user5495947, Jun 01 '17 at 15:12

Divide page in two columns and align them in HTML

3 Answers3