Floating DIV issues

Question

here is the demo of my code http://jsfiddle.net/mn7Ut/ I cant seem to find a way to properly add text under h1. this is what happens when I try to add some text http://jsfiddle.net/uY3pQ/ what am I doing wrong this time? :C

div {margin:0; padding:0;}


#wrap {
    background-color:#000000; 
    width:auto;
    float:left;
    padding:50px;
    } 


.container {
    width:500px;
    background:#666666;
    color:#FFFFFF;
    float:left;
    margin-right:25px;
    }

.left {
    float:left;
    display:block;
    }

.padding {
    padding:30px;
    }

.list {
    background-color:#333;
    }

.box {
    background-color:#ccc;
    width:100px;
    }

h1 {
    color:#000;
    background:#ddd;
    }   

.

<div id="wrap">

    <div class="container">
        <div class="box-container">
            <h1 class="left padding">Some text here</h1>
                <ul class="list padding left">
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                    <li>Some text here Some text here</li>
                </ul>
        </div>
    </div>

    <div class="box padding left">
    Some text here Some text here Some text here
    </div>

</div>

Answer 1

You could wrap the h1 and text in a container, and float it left:

html

<div class="left inner" >
     <h1 class="padding">Some text here</h1>
     text text text text text text text text
 </div>         

css

.inner{
    display:inline-block;
    width:200px;
}

See fiddle for full solution http://jsfiddle.net/uY3pQ/5/

• Tested in chrome