Question

I know this is a srs beginner question, but here goes:

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.

This is the code I am using:

<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>

it seems like it should work, but it turns into this:

_{(source: theviolencestopshere.ca)}

the <div> tags are outlined.
You can see that the <div> containing the list overlaps the image for some reason.

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.

Also note: this still doesn’t work if I wrap the <img> in it’s own div.

What am I doing wrong here? The float_left class is predictably just float: left, clear is just clear: both, and the other classes are not defined yet, in case that is relevant.

Answer 1

Could I offer an alternative? I think both your markup and your css are unnecessarily verbose. This is a slightly rough example, but hopefully is enough to illustrate my point:

<style type="text/css">
    .statsbox {
        background: transparent url(path_to_image) no-repeat 9px 20px;
        float: left;
        width: 300px;
    }

    #stats h3 {
    }

    #stats {
        padding-left: 40px;
    }

    #stats ul {
        padding-left: 1em;
    }

</style>

<div class="statsbox">
    <div id="stats">
        <h3> User Uploaded Images </h3>
        <ul>
           <li> 122 uploaded images </li>
           <li> 13 images pending approval </li>
           <li> 15 anonymous images </li>
           <li> 97 unique users </li>
        </ul>
    </div>
</div>

The key things I’m doing here are:

1. Removing the img element and applying it as a background image of .statsbox instead. This actually gives you lots of flexibility about where the image goes, without it impacting on the other elements in the html.

2. Avoiding using list-style-postition: inside – using this property means the bullets are basically rendered as a part of the text line they are on; if the lines happen to wrap for any reason, the bullets will fail to line up properly.

3. Made <p class="statsbox_header"> User Uploaded Images </p> an h3 instead. You’ve indicated that it’s a heading so you might as well use that element, as it leads to cleaner markup/css.

4. Removed the class “statsbox” from the <li> elements as CSS inheritance means you should be able to style these just by using a selector such as .statsbox li or similar. Which again makes your markup and styles simpler.

Sorry, I’m a bit rushed for time ATM, but if you need me to expand upon this answer, then please just ask 🙂