CSS floating issue

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:

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

Did you try display:inline ?

Answer 2

the 2nd inner div needs a width, or else it'll never fit. try this:

<style type="text/css">
* {
    border:1px solid red;
}
.statsbox {
    width:400px;
}
.float_left
{
    float:left;
}
/* stats needs a width */
#stats
{
    width:150px;
}
</style>
<div class="statsbox float_left">
    <img src="images/chart_bar.png" class="float_left">
    <div class="float_left" id="stats">
        <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>

Answer 3

If I add display: inline to .float_left, everything works as expected.

.float_left{ float: left; display: inline; }

Update it seems the border specified on the divs is also playing a part. removing them breaks the display in FF3.5.

Answer 4

The <div> containing the <ul> seems to expand to the left because of the list. I found out if I set the list-style-type to none, then it worked (similarly if I removed the list entirely it worked as expected).

It was like the list text was getting drawn on the very left edge of the <div>, and then the bullets would push it back to the left.

So I found the list-style-position attribute and put list-style-position: inside in my ul.statsbox selector.

I guess you can use inside to say the bullets should be inside the flow of text, and outside to say the bullets should be drawn outside the flow of text.

ul.statsbox {

    list-style-position: inside;

}

.float_left {

    float: left;

}

.float_right {

    float: right;

}

.clear {

    clear: both;

}

This CSS applied to the HTML in the question, creates the expected outcome.

Answer 5

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