Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h1>Update: Solved Using Flexbox</h1> <p>Now that we have <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">Flexbox</a> (with <a href="http://caniuse.com/#feat=flexbox" rel="noreferrer">over 95% support globally</a>) this layout (and others) can be easily achieved without styles being dependent on source order.</p> <p><em>Flexbox Example:</em></p> <h3>HTML</h3> <pre><code>&lt;div class="flex-container"&gt; &lt;div class="flex-column"&gt; Big &lt;/div&gt; &lt;div class="fixed-column"&gt; Small &lt;/div&gt; &lt;/div&gt; </code></pre> <h3>CSS</h3> <pre><code>.flex-container { display: flex; } .flex-column { flex: 1; } .fixed-column { width: 200px; } </code></pre> <h3><a href="http://jsfiddle.net/2886s5ec/" rel="noreferrer">Live Demo using Flexbox</a></h3> <hr> <hr> <hr> <h1>Solved Using Floats</h1> <p>The trick is matching the remainder column’s margin to the floated sidebar’s width. Remember, source order matters when using floats, so we make sure the floated element comes first.</p> <p><em>Example right-aligned small column:</em></p> <h3>HTML</h3> <pre><code>&lt;div id="Container"&gt; &lt;div id="RightColumn"&gt;Right column&lt;/div&gt; &lt;div id="LeftColumn"&gt;Left column&lt;/div&gt; &lt;/div&gt; </code></pre> <h3>CSS</h3> <pre><code>#RightColumn { float : right; width : 200px; } #LeftColumn { margin-right : 200px; }​ </code></pre> <h3>Live Demo</h3> <ul> <li><a href="http://jsfiddle.net/bgBXM/23/" rel="noreferrer">Right-aligned small column</a></li> <li><a href="http://jsfiddle.net/bgBXM/10/" rel="noreferrer">Left-aligned small column</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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