Help with css Float

I know a lot of people have asked questions on fl开发者_开发百科oat before, but from even looking at them I can't see what I'm doing wrong. I just want

HELLO

THERE

To be just to the left of the ul. Based on this answer I tried adding clear:both to the parent div. And based on this answer I tried adding overflow:hidden to the parent. Neither worked.

In all cases the UL is under the HELLO THERE and to the right.

        <div>
            <div style"float:left;">
                <div>HELLO</div>
                <div>THERE</div>
            </div>
            <div style="float:right;">
                <ul>
                    <li>A</li>
                    <li>B</li>
                    <li>C</li>
                </ul>
            </div>
        </div> 

Just float them both to the left. No need to do any sort of clearing or anything for what you want. Check out the demo below.

Live Demo

Markup

<div>
    <div class="left">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div class="left">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div> 

CSS

.left{float: left}

Your float: left; isn't being applied because you forgot an =. You should float both divs left if you want them to be next to each other:

<div>
    <div style="float:left;">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div style="float:left;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div>

You may want to add overflow: hidden to the parent div, or an empty div like:

<div style="clear:left;"></div>

at the end of it, to make the content after that div be below it instead of beside it:

*JSFiddle Example*

Change the ul to float:left as well. As long as there is horizontal space, it should then float next to the HELLO THERE.

Rather than manually clearing your elements, use a cross browser clearfix class like so:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
    overflow: visible;
}

And apply it to your parent div:

<div class="clearfix">
    <div style="float:left;">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div style="float:right;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div> 

I know there will be like 1000 answer by the time this get posted, but you need to specify a width for the outer most div. Because without that it defaults to 'auto', which means it will squash down as much as possible, which is why the <ul> is being pushed down to the next line.

<div style="width:100%;">
    <div style="float:left;">
        <div>HELLO</div>
        <div>THERE</div>
    </div>
    <div style="float:left;">
        <ul>
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</div>