Css two columns with offset center - html

Question

Hi i currently have two colums one left and one right with the left column having two rows in it
however i want the centre point of the column offset to the right so the left column would be about 60% and the right would be 40%
Here is the html and css i am using
#import url(http://fonts.googleapis.com/css?family=Lora:700);
.container {
width: 75%;
margin: auto;
}
.titleheader {
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}
.midcontainer {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
margin-top: 20px;
}
.top {
margin-bottom: 15px;
}
.bottom {} .rightsection {} .leftsection {
display: inline-block;
}
.memo {}
<div class="container">
<div class="titleheader">
<?php echo $this->Accountname; ?></div>
<div class="midcontainer">
<div class="leftsection">
<div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="rightsection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="memo"></div>
</div>

Answer 1

As much as I love them, you cannot set the widths of CSS columns independently. However, you can get the layout you're looking for by using CSS tables:
.midcontainer {
display:table;
border-spacing: 50px;
border-collapse: separate;
}
.leftsection, .rightsection{
display:table-cell;
}
.rightsection {
width:40%
}
#import url(http://fonts.googleapis.com/css?family=Lora:700);
.container{
width: 75%;
margin: auto;
border:1px dotted #ccc;
}
.titleheader{
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}
.midcontainer {
display:table;
border-spacing: 50px;
border-collapse: separate;
}
.leftsection, .rightsection{
display:table-cell;
}
.rightsection {
width:40%
}
.top{
margin-bottom: 15px;
}
.bottom{
}
.memo{
}
<div class="container">
<div class="titleheader">Invalid Account Number</div>
<div class="midcontainer">
<div class="leftsection">
<div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="rightsection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
<div class="memo"></div>