Databases
StackOverflow2013
Postsdbo
POBackground divided in 2 (left and right)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBackground divided in 2 (left and right)
    text
    copied!<p>Simply :</p> <p><a href="http://d.pr/i/EMwo.jpg" rel="nofollow noreferrer">http://d.pr/i/EMwo.jpg</a></p> <p>This is what I'd like to achieve the cleanest way possible. I'm using <code>Inuit.css</code> here.</p> <p>It should be pretty simple but the padding makes it more complicated.</p> <p>(I didn't think it was relevant to add the markup here.)</p> <p><strong><em>EDIT:</em></strong></p> <p>I was wrong. Here: </p> <pre><code>&lt;div class="content content--work"&gt; &lt;div class="container--bigger"&gt; &lt;div class="grid"&gt; &lt;div class="grid__item one-half"&gt; &lt;div class="work-main"&gt; &lt;img src="img/work/timburton-1.svg" alt=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="grid__item one-half"&gt; &lt;div class="challenge"&gt; &lt;h3 class="work-title"&gt;The challenge&lt;/h3&gt; I needed to create a strong system.&lt;br&gt; Something that would be good enough to generate 7 posters. &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!-- container bigger --&gt; </code></pre> <p></p> <p>One-half are inline blocks that take up half the size of the container. The gutter is made with the padding. (border-box)</p> <pre><code>grid__item { display: inline-block; padding-left: 30px; } one-half { width: 50%; } </code></pre> <p><strong>* EDIT 2 :*</strong></p> <p>I came up with <a href="http://aurelieremia.be/tfa/work-timburton.html" rel="nofollow noreferrer">this</a>. Doesn't work very well.</p> <p>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)</p> <p>Here is the css: (same html):</p> <pre><code>.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% </code></pre> <ul> <li>What's more, it acts differently depending on the browser I'm using</li> </ul>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload