StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You will need a <code><div></code> between your <code>.container</code> and your <code>.section-title</code> and this <code><div></code> should have the <code>:before</code> and <code>:after</code> pseudo classes similarly to what you've already done.</p> <p>The additional <code><div></code> (let's call it <code>.title-container</code>) wrapping around the <code>.section-title</code> will shrink and grow both in width and height with the text inside it. Also both the <code>.title-container</code> and <code>.section-title</code> should be displayed as <code>inline-block</code> in order to center them, add margin/padding and to grow/shrink according to text.</p> <p>I've also moved some of the CSS rules fromthe <code>.section-title</code> to <code>.title-container</code></p> <p>Look at the updated jsfiddle: <a href="http://jsfiddle.net/grim/tC99W/3/" rel="nofollow">http://jsfiddle.net/grim/tC99W/3/</a>, it's probably easier to understand this way.</p> <p><strong>EDIT: Expanding lines to the edge of container:</strong><br> This is another updated jsfiddle: <a href="http://jsfiddle.net/tC99W/10/" rel="nofollow">http://jsfiddle.net/tC99W/10/</a></p> <p>Basically you should let the <code>.title-container</code> expand so it shouldn't be an <code>inline-block</code> but rather a <code>block</code> element. Also the borders should be wider (I've put <code>width: 50%;</code> but it's actually a bit long). The most important part is to play with the <code>z-index</code> of the title and the <code>:before</code> and <code>:after</code> elements.</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