StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POCSS floating issue
text
Body
copied!<p>I know this is a srs beginner question, but here goes:</p> <p>I am trying to get a box, with an icon in the top left corner, and all the content of that box will be to the right of the icon.</p> <p>This is the code I am using:</p> <pre><code><div class="statsbox float_left"> <img src="images/chart_bar.png" class="float_left"> <div class="float_left"> <p class="statsbox_header"> User Uploaded Images </p> <ul class="statsbox"> <li class="statsbox"> 122 uploaded images </li> <li class="statsbox"> 13 images pending approval </li> <li class="statsbox"> 15 anonymous images </li> <li class="statsbox"> 97 unique users </li> </ul> </div> <div class="clear"></div> </div> <div class="clear"></div> </code></pre> <p>it seems like it should work, but it turns into this:</p> <p><a href="http://theviolencestopshere.ca/images/fail.jpg" rel="nofollow noreferrer">it fails http://theviolencestopshere.ca/images/fail.jpg</a></p> <p>the <code><div></code> tags are outlined.<br> You can see that the <code><div></code> containing the list overlaps the image for some reason.</p> <p>Note: if the unordered list isn't in that div, then this works as expected. It's like the presence of bullets push it over further to the left.</p> <p>Also note: this still doesn't work if I wrap the <code><img></code> in it's own div.</p> <p>What am I doing wrong here? The float_left class is predictably just <code>float: left</code>, clear is just <code>clear: both</code>, and the other classes are not defined yet, in case that is relevant.</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