StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I got it working in your fiddle:</p> <p><a href="http://jsfiddle.net/BcjzK/4/" rel="nofollow">http://jsfiddle.net/BcjzK/4/</a></p> <p>Because of the way div layouts work, its always going to start the green div below the red one if it comes after the red one in the HTML code unless you put it in a parent container that encapsules the entire left side.</p> <p>As a fix I made another container div that would hold both the img and the green div and then floated that container left. </p> <p>HTML:</p> <pre><code><div class="container"> <div class="imgContainer"> <img src="http://hazelden.ca/sample.png" alt="Some Image" width="320" height="auto" /> <div class="extra-content"> Text </div> </div> <div class="content"> ... </code></pre> <p>CSS:</p> <pre><code>.container { width:700px; border:solid 1px gray; } .imgContainer{ float: left; } .content { width:460px; border:solid 1px red; margin-right:0px; margin-left:auto; } .extra-content { width:230px; border:solid 1px green; } img { border:solid 1px blue; } blockquote { border:solid 1px gray; width:30%; float:right; } </code></pre> <p>EDIT: </p> <p>I noticed that the imgContainer box forces your content text to change position slightly to accommodate it's presence. if you want the content text to lay out precisely the same as before use this:</p> <pre><code>.imgContainer{ float: left; height: 450px; overflow: visible; } </code></pre> <p><a href="http://jsfiddle.net/BcjzK/5/" rel="nofollow">http://jsfiddle.net/BcjzK/5/</a></p> <p>You can even get the content text under the pic as close as it is on the side by changing the height property of imgContainer to 430px.</p> <p><a href="http://jsfiddle.net/BcjzK/6/" rel="nofollow">http://jsfiddle.net/BcjzK/6/</a></p> <p>Hope this helps!</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