StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>pure CSS & Cross browser - the thickness and spacing can be customized</p> <p>After your latest Edit: this is a <a href="http://jsfiddle.net/avrahamcool/JSktg/4/" rel="nofollow"><strong>Working Fiddle</strong></a></p> <p>without changing the markup, top border only.</p> <p><strong>your HTML:</strong></p> <pre><code><div class="sampleDiv"> some content </div> </code></pre> <p><strong>new CSS</strong></p> <pre><code>.sampleDiv { border-top: 2px solid black; padding-top: 1px; } .sampleDiv:before { content: ''; border-top: 1px solid black; display: block; width: 100%; } </code></pre> <p><strong>If you are allowed to change the DOM:</strong></p> <p>one line anywhere in the markup: <a href="http://jsfiddle.net/avrahamcool/JSktg/" rel="nofollow"><strong>Working Fiddle</strong></a></p> <p><strong>HTML:</strong></p> <pre><code><div class="SpecialLine"></div> </code></pre> <p><strong>CSS:</strong></p> <pre><code>.SpecialLine { border-top: 2px solid black; height: 2px; border-bottom: 1px solid black; } </code></pre> <p>full container border: <a href="http://jsfiddle.net/avrahamcool/JSktg/2/" rel="nofollow"><strong>Working Fiddle</strong></a></p> <p><strong>HTML:</strong></p> <pre><code><div class="SpecialContainer"> <div class="Content"> here goes the content <div> </div> </code></pre> <p><strong>CSS</strong></p> <pre><code>.SpecialContainer { border: 2px solid black; padding: 1px; } .Content { border: 1px solid black; } </code></pre>

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