Databases
StackOverflow2013
Postsdbo
POOrder of divs, vs css float left & right
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOrder of divs, vs css float left & right
    text
    copied!<p>I'm trying to style some HTML (which has been generated by a horrendous PHP script that I don't want to futz with if I can avoid it) that has essentially the following structure.</p> <pre><code>&lt;div class="outer"&gt; &lt;div class="imageContainer"&gt;&lt;img src="image42.png" /&gt;&lt;/div&gt; &lt;h1&gt;The Title String&lt;/h1&gt; &lt;div class="description"&gt;Lorem ipsum dolor sit amet, ... &lt;/div&gt; &lt;div class="details"&gt;These are the details...&lt;/div&gt; &lt;/div&gt; </code></pre> <p>I want the <code>div.imageContainer</code> to float left, and the <code>div.details</code> to float right, with the description text flowing down between them (and then under the image to the left if there's a lot of description text).</p> <p>The following CSS gets the <code>div.imageContainer</code> and the <code>div.description</code> right, but puts the <code>div.details</code> below and to the right of the description, looking as though it had been given a <code>"clear:left"</code> (in actuality, it falls completely outside the <code>div.outer</code>):</p> <pre><code>.imageContainer { float: left; } .description { width: 50%; } .details { width: 50%; float: right; } </code></pre> <p>Following the advice of several other posts I've found here on SO, I tried adding:</p> <pre><code>.outer { overflow: hidden; } </code></pre> <p>which lengthens the <code>div.outer</code> so that it encompasses the <code>div.details</code> -- but leaves the <code>div.details</code> in the same position relative to the <code>div.description</code>.</p> <p>In my example HTML, I find that if I exchange the order of the <code>div.description</code> and <code>div.details</code> tags, I get it looking exactly like I want. Which is great as far as the <em>example</em> goes, but doesn't help me avoid delving into the guts of that egregiously horrible PHP code that's generating the HTML that I <em>really</em> want to style. :-/</p> <p>Is there any way for me to accomplish this with just CSS? </p> <p>(I realize I can fiddle the DOM with Javascript/jQuery, but that seems kludgy to me.)</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