-2

Simply :


(source: d.pr)

This is what I'd like to achieve the cleanest way possible. I'm using Inuit.css here.

It should be pretty simple but the padding makes it more complicated.

(I didn't think it was relevant to add the markup here.)

EDIT:

I was wrong. Here:

<div class="content content--work"> 
  <div class="container--bigger">
    <div class="grid">
      <div class="grid__item one-half">
        <div class="work-main">
          <img src="img/work/timburton-1.svg" alt="">
        </div>
      </div>
      <div class="grid__item one-half">
        <div class="challenge">
          <h3 class="work-title">The challenge</h3>
          I needed to create a strong system.<br>
          Something that would be good enough to generate 7 posters.
        </div>
     </div>
   </div>
 </div><!-- container bigger -->

One-half are inline blocks that take up half the size of the container. The gutter is made with the padding. (border-box)

grid__item {
  display: inline-block;
  padding-left: 30px;
}

one-half {
  width: 50%;
}

* EDIT 2 :*

I came up with this. Doesn't work very well.

The border between the gradient is not at the intersection if we resize the window. Also, I've tried to make it with a gradient, doesn't work very well in my opinion. (percent vs fixed width)

Here is the css: (same html):

.challenge
    background: #f4f0e5
    padding-top: 20px
    padding-bottom: 30px
    vertical-align: top
    padding: 20px
    box-shadow: inset 5px 0 0 #9b9797
    margin-bottom: 20px

.content--work
    background:  #423c3f
    padding-top: 0
    padding-bottom: 0
    background: #423c3f /* Old browsers */
    background: -moz-linear-gradient(left, #423c3f 0%, #423c3f 50%, #f7f5ea 50%, #f7f5ea 100%) /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#423c3f), color-stop(51.1%,#423c3f), color-stop(51.1%,#f7f5ea), color-stop(100%,#f7f5ea)) /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* IE10+ */
    background: linear-gradient(to right, #423c3f 0%,#423c3f 50%,#f7f5ea 50%,#f7f5ea 100%) /* W3C */

    .container--bigger
        padding-top: 20px
        background: image-url("work-separation.png") repeat-y 51.5% 60%
  • What's more, it acts differently depending on the browser I'm using
9
  • Your second image doesn't include the full page height and width so it's kind of hard to tell what needs to change. Jun 11, 2013 at 21:09
  • So you're looking for equal height columns?
    – cimmanon
    Jun 11, 2013 at 21:11
  • @Copenhagen What i'd like is to have to background divided in two. (bichromatic) I didn't put the full page because the rest was pretty much the same here.
    – Naemy
    Jun 11, 2013 at 21:12
  • @cimmanon I'm looking to have the background divided in two (one part dark brown, the other white) on the full page. But because of the padding, it isn't a perfect 50%. But equal height would be nice too, I've found it pretty hard to imprement (without table)
    – Naemy
    Jun 11, 2013 at 21:13
  • 1
    Two color backgrounds are done with gradients: cssdeck.com/labs/6xc4wwak. You'll need to rethink your 30px padding to make it work.
    – cimmanon
    Jun 11, 2013 at 21:26

3 Answers 3

0

Strange you would think it is not relevant to add the markup. What else could be relevant?

Anyway, I set up a possible solution for you.

My markup would look something like this:

<div id='left'>
    <img src='...' />
</div>
<div id='right'>
    <div id="right-content">
        <p>Lorem ipsum</p>
    </div>
</div>

Note the extra div inside the right column, which we need for the padding you are having problems with. The two tone background can be achieved with a simple gradient on the body, which would also take care of the columns that might not have the same height otherwise. My css would look something like this:

body, html {
    height: 100%;
}
body {
    background: linear-gradient(to right, #753517 50%, #eae7c9 50%);
}
#left, #right {
    float: left;
    width: 50%;
}
#left img {
    float: right;
}
#right-content {
    padding: 0 30px;
}

Should be straight forward, but feel free to ask if you want me to explain anything. And don't forget to add prefixes to the gradient code to make it work in 'all' browsers.

To see a working example, have a look at this: http://jsfiddle.net/Pevara/G2Nzr/

1
  • Thanks ! I tried it, and it worked, but the problem is that I need the lighter border to be placed on the separation of the gradient, and for some reason, I have trouble to do that. I don't get why. Here's a demo : aurelieremia.be/tfa/work-timburton.html
    – Naemy
    Jun 12, 2013 at 18:30
0

If you're using inuit.css, they have a grid system built in for exactly this purpose. You can see the source code here.

Basically, you want to use a combination of grid__item's with specified widths. In your case, the markup would be like this:

<div class="grid">
   <div class="grid__item one-half">
       left half
   </div>
   <div class="grid__item one-half">
       right half
   </div>
</div>

This will create two halves next to each other, with a gutter of (i believe) 16px in between. They must be wrapped in the grid parent div in order to account for this gutter, as well as for a clearfix.

If you find a need for more than just halves further into your project, the same system can be used with thirds, fourths, fifths, etc.

1
  • There we go, I added the markup. I actually used this, but these are inside a container to center everything. The problem I have is to have a background full width that would divide these two grid items.
    – Naemy
    Jun 12, 2013 at 2:50
0

You will try background-clip and box-sizing. Like this:

<div class="grid">
   <div class="grid__item one-half">
       left half
   </div>
   <div class="grid__item one-half">
       right half
   </div>
</div>

The css code:

*{
  box-sizing: border-box;
}
.grid > div {
  width: 50%;
  float: left;
  background: green;
}
.grid > div:nth-child(2){
  padding-left: 30px;
  background: red;
  background-clip: content-box;
}

You need to add the browser prefix,for eg: -moz-/-webkit-/-o-/-ms- for background-clip and box-sizing. Please view the Demo.

And you will try this:

<div class="grid">
  <div>left</div>
  <div>right</div>
</div>

The css code:

*{
  box-sizing: border-box;
}
.grid > div{
  background: green;
  width: 50%;
  float: left;
}
.grid div:nth-child(2){
  border-left: 30px solid transparent;
  padding: 0 10px;
  background-color: orange;
  background-clip: padding-box;

}

Please view the demo. And you will try the css3 calc() function, like this:

.grid > div{
  background: green;
  float: left;
  width: 50%;
}
.grid > div:nth-child(2){
  background: orange;
  float: right;
  width: -moz-calc(50% - 30px);
  width: -webkit-calc(50% - 30px);
  width: -o-calc(50% - 30px);
  width: -ms-calc(50% - 30px);
  width: calc(50% - 30px);
}

Please view the demo.

There is finally a way, you will use the flexbox module. Like this:

<div class="grid">
  <div>left</div>
  <div>right</div>
</div>

the css code:

.grid {
  display: -moz-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.grid > div {
  -moz-box-flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  -webkit-flex: 1;
  flex:1;
  width: 50%;
  background: green;
}
.grid > div:nth-child(2){
  margin-left: 30px;
  background: red;
}

please view the demo.

1
  • Thanks ! Should have precised that the two grid items are within a container with a fixed width. However, pretty interesting, especially with the use of the calc(). What is a bit less cool however is browser support. Works pretty well across a lot of browsers, but not on safari mobile.
    – Naemy
    Jun 12, 2013 at 16:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.