CODEWITHSUNDEEP
htmlcss
Josh Kirkpatrick
Josh Kirkpatrick

Reputation: 403

Css two columns with offset center

Hi i currently have two colums one left and one right with the left column having two rows in it

img

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>

Upvotes: 2

Views: 103

Answers (1)

Moob
Moob

Reputation: 16184

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>

Upvotes: 3

Related Questions