Ivan Topić Ivan Topić - 5 months ago 12
CSS Question

Two divs with 50% width while content inside container

How to accomplish the look like it is in the image?

enter image description here

It is just regular Bootstrap code for columns, but first two columns should be on white

background
inside
.container
, while the other two columns on black
background
and that black
background
is going right all the way to the end.

CodePen

<div class="container">
<div class="col-md-3">
<p>First column</p>
</div>
<div class="col-md-3">
<p>Second column</p>
</div>
<div class="col-md-3">
<p>Third column</p>
</div>
<div class="col-md-3">
<p>Fourth column</p>
</div>
</div>

Answer

use linear-gradient in body , giving your .container is the parent, and you won't have any wrapper around .container

Sorry that I'm bothering you, but what I meant was to place the image like this image.prntscr.com/image/78940c8115c943a186500ac24556758b.jpeg

Add another parent div (being child of body) and add background-image to that div

body {
  background: linear-gradient(to right, white 0%, white 50%, black 50%, black 50%, black 100%);
}
#wrap {
  background: url(//lorempixel.com/200/200) no-repeat  66.6% 0 / 25% auto
}
.container {
  border: 1px solid #f01;
}
[class^="col-"] p {
  color: white;
  height: 75px;
  background-color: blue
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="wrap">
  <div class="container">
    <div class="col-xs-3 col-md-3">
      <p>First column</p>
    </div>
    <div class="col-xs-3  col-md-3">
      <p>Second column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Third column</p>
    </div>
    <div class="col-xs-3 col-md-3">
      <p>Fourth column</p>
    </div>
  </div>
</div>