StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p><strong>UPDATE</strong></p> <p>If you need to place elements in a row, you can use <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" rel="noreferrer">Flex Layout</a>. Here you have another <a href="https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties?mc_cid=2fb2e2d2fa&mc_eid=7ed215d0c6" rel="noreferrer">Flex tutorial</a>. It's a great CSS tool and even though it is not 100% compatible, each day its <a href="http://caniuse.com/#feat=flexbox" rel="noreferrer">support</a> is getting better. This works as simple as:</p> <p>HTML</p> <pre><code><div class="container"> <div class="contentA"></div> <div class="contentB"></div> </div> </code></pre> <p>CSS</p> <pre><code>.container { display: flex; width: 100%; height: 200px; } .contentA { flex: 1; } .contentB { flex: 3; } </code></pre> <p>And what you get here is a container with a total size of 4 units, that share the space with its children in a relation of 1/4 and 3/4.</p> <p>I have done an example in CodePen that solves your problem. I hope it helps.</p> <p><a href="http://codepen.io/timbergus/pen/aOoQLR?editors=110" rel="noreferrer">http://codepen.io/timbergus/pen/aOoQLR?editors=110</a></p> <p><strong>VERY OLD</strong></p> <p>Maybe this is just a nonsense, but have you tried with a table? It not use directly CSS for positioning the divs, but it works fine.</p> <p>You can create a 1x2 table and put your <code>divs</code> inside, and then formatting the table with CSS to put them as you want:</p> <pre><code><table> <tr> <td> <div></div> </td> <td> <div></div> </td> </tr> </table> </code></pre> <p><strong>Note</strong></p> <p>If you want to avoid using the table, as said before, you can use <code>float: left;</code> and <code>float: right;</code>and in the following element, don't forget to add a <code>clear: left;</code>, <code>clear: right;</code> or <code>clear: both;</code> in order to have the position cleaned.</p>

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