StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>An alternative is to add the color bar as a bg image to the article, rather than by adding a div. And if needed, give the article left padding equal to the width of the color bar.</p> <p>Another option is to have the div act as a wrapper around all of the content inside the article, and add the color bar (bg image and optional left padding) to the div.</p> <p>In both cases, the bg image will be applied to an element that's naturally guaranteed to have the correct height, without any assistance from jQuery. This is especially useful if the content is likely to change in height while the page is open, as it doesn't require updating the height using jQuery.</p> <p><strong>Edit:</strong></p> <p>I think the only CSS-only solution (that doesn't require jQuery/JavaScript) is if the article is in a separate container from the content above and below, with all 3 containers separately horizontally centered in the page. In that case, the container for the article could have a bg image on the left, and then the article could be given a fixed width and horizontally centered. This avoids the needs for jQuery, doesn't require absolute positioning (which would take the content out of the flow of the layout), and doesn't require updating the height if the content changes while the page is open.</p> <p>Otherwise, it's back to square one and just finding the right jQuery code to set the appropriate height for the color bar div. Just be sure to reapply the height if the article content dynamically changes.</p> <pre><code>$('.ColorBarLeft').height($('.PostHome').height()); </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