Search code examples
htmlcsssplitsections

Properly splitting a <section> in two and adding content

I'm reproducing a site in order to practice CSS and HTML, but I got stuck on something. I tried for hours and searched everywhere for a solution in order to split a section in half and add a row with two columns inside, like you can see in this image:

enter image description here Also tried to look at their source, but they have tons of classes in all kind of files, which makes it pretty hard to figure out how they did it.

/**** Standard stuff ****/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,
body {
  background-color: #fff;
  color: #555;
  font-family: 'Lato', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 20px;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
.section {
  clear: both;
  padding: 0px;
  margin: 0px;
}
.clearfix {
  zoom: 1;
}
.clearfix:after {
  content: '.';
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
/**** Row ****/

.row {
  max-width: 1140px;
  margin: 0 auto;
}
.row:before,
.row:after {
  content: "";
  display: table;
}
.row:after {
  clear: both;
}
/**** Cols ****/

.col {
  display: block;
  float: left;
  margin: 1% 0 1% 1.6%;
}
.col:first-child {
  margin-left: 0;
}
.span-1-of-2 {
  width: 49.2%;
}
/**** Styling ****/

.first-half {
  width: 50%;
  background-color: #ff0000;
  height: 500px;
  float: left;
}
.second-half {
  width: 50%;
  float: right;
  height: 500px;
}
.section-split {
  position: relative;
}
.section-split .row {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.left-text {
  padding-right: 15%;
}
.right-text {
  padding-left: 15%;
}
.right-text,
.left-text {
  color: #fff;
}
<section class="section-split clearfix">
  <div class="first-half"></div>
  <div class="second-half">
    <img src="http://placehold.it/950x500" alt="">
  </div>
  <div class="row">
    <div class="col span-1-of-2">
      <div class="left-text">

        <p>Case Study - Macaw Mobile App We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
          eu fugiat nulla pariatur. Play Showcase</p>
      </div>
    </div>

    <div class="col span-1-of-2">
      <div class="right-text">

        <p>Case Study - Macaw Mobile App We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
          eu fugiat nulla pariatur. Play Showcase</p>

      </div>
    </div>
  </div>
</section>

Here's what I've managed to do: http://codepen.io/anon/pen/jyvBvo. Even though it's similar to what I want, I highly doubt that that's the proper way to do it. I think the code is pretty "ugly".

I'm also trying to make it responsive, which makes it even more challenging.

Any help and guidance will be appreciated!

Thank you!

Solution

  • Flexbox makes layouts like this pretty easy. To create the split plane, just have a flex parent with 2 flex children, and by default they will display in a flex row like this. Then you can make the flex children flex parents as well and shift around the content in them via with flex properties.

    /**** Standard stuff ****/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

section {
  display: flex;
  color: #fff;
  min-height: 100vh;
}

.item {
  flex-basis: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4em;
}

.pri {
  background: red;
  align-items: flex-end;
}

.sec {
  background: url('http://placehold.it/950x500') center center no-repeat;
  background-size: cover;
}

.item p {
  width: 66%;
}

@media (max-width: 767px) {
  section { flex-direction: column; }
  /* or you can use this 
  section { display: block; } */
}
    <section>

  <div class="item pri">
    <p>Case Study - Macaw Mobile App We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat
      nulla pariatur. Play Showcase</p>
  </div>

  <div class="item sec">
    <p>Case Study - Macaw Mobile App</p>

    <p>We recently restructured Macaws strategy which lead to an increase in sales and traffic for the brand. Downloads and turnover skyrocketed.</p>

    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Play Showcase</p>

  </div>

</section>