Help with css Float

Question

I know a lot of people have asked questions on float 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>

You're missing an `=` sign in your `style"float:left;"`... – animuson Aug 30 '11 at 19:23 — animuson, Aug 30 '11 at 19:23

Loktar · Accepted Answer · 2011-08-30T19:25:52.887

3

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}

edited Aug 30 '11 at 19:25

answered Aug 30 '11 at 19:20

Loktar

34,764
7
90
104

Paul · Answer 2 · 2011-08-30T19:26:01.427

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*

score 2 · Answer 3 · answered Aug 30 '11 at 19:23

2

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

answered Aug 30 '11 at 19:23

Matt

2,982
1
22
23

No it won't, if the division is floated to the right, it becomes an inline-block with a width determined by it's filling content. Floating an unordered list inside that will have no effect. – animuson Aug 30 '11 at 19:25
Thank you. I meant the div in which the ul was sitting. My bad for not being perfectly clear. – Matt Aug 30 '11 at 19:27

score 1 · Answer 4 · answered Aug 30 '11 at 19:20

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>

score 0 · Answer 5 · answered Aug 30 '11 at 19:23

0

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>

answered Aug 30 '11 at 19:23

Cubed Eye

5,581
4
48
64

I was under this assumption first but this, http://jsfiddle.net/loktar/6RtJ2/2/ says otherwise. – Loktar Aug 30 '11 at 19:25
Divisions are block-level by default and automatically stretch to fill the width of the parent container. You do not need to specify a width. – animuson Aug 30 '11 at 19:26
@animuson, div's that have no content (ie.
) don't stretch to there parents width, when you float elements it removes them from the flow, thus the div above with the floated elements taken out, becomes empty. See this fiddle: http://jsfiddle.net/cZf7a/ – Cubed Eye Aug 30 '11 at 20:01
1

@Cubed Eye Studios: That only affects the visible area of the division. Any floated elements still float to the right correctly even if there is no 'content' inside the division. Either way, you do *not* need to specify a width here. – animuson Aug 30 '11 at 20:17
@Cubed Eye Studios: To further add, you should investigate things first. If you inspect that division that has no content in something such as Firebug, you'll see that the division does stretch to the width of the parent element, it just has a height of 0... `div [696x0]` – animuson Aug 30 '11 at 20:20

Help with css Float

5 Answers5