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
– animuson ♦

2011-08-30 19:23:32 +00:00
Commented Aug 30, 2011 at 19:23 — animuson
– animuson ♦, Commented Aug 30, 2011 at 19:23

Loktar · Accepted Answer · 2011-08-30 19:25:52Z

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, 2011 at 19:25

answered Aug 30, 2011 at 19:20

Loktar

35.3k7 gold badges96 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Paul · Accepted Answer · 2011-08-30 19:26:01Z

3

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*

edited Aug 30, 2011 at 19:26

answered Aug 30, 2011 at 19:20

Paul

142k28 gold badges285 silver badges272 bronze badges

Comments

Matt · Accepted Answer · 2011-08-30 19:23:47Z

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, 2011 at 19:23

Matt

3,1321 gold badge24 silver badges23 bronze badges

2 Comments

animuson Over a year ago

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.

Matt Over a year ago

Thank you. I meant the div in which the ul was sitting. My bad for not being perfectly clear.

Jesse · Accepted Answer · 2011-08-30 19:20:22Z

1

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>

answered Aug 30, 2011 at 19:20

Jesse

8,4236 gold badges55 silver badges82 bronze badges

Comments

Cubed Eye · Accepted Answer · 2011-08-30 19:23:55Z

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, 2011 at 19:23

Cubed Eye

5,6314 gold badges53 silver badges66 bronze badges

5 Comments

Loktar Over a year ago

I was under this assumption first but this, jsfiddle.net/loktar/6RtJ2/2 says otherwise.

animuson Over a year ago

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.

Cubed Eye Over a year ago

@animuson, div's that have no content (ie. <div></div>) 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: jsfiddle.net/cZf7a

animuson Over a year ago

@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 Over a year ago

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

Collectives™ on Stack Overflow

Help with css Float

5 Answers 5

Comments

Comments

2 Comments

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

2 Comments

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related