ansaurus

Question

CSS: How do you keep this Div to the right of a float?

Answer 1

A:

I'd restrict the width for the .advice-content or .advice-area div (or whatever div is around the content you're floating).

When you enter text into a floated div the div will auto-size its width accordingly, and if it expands too wide it'll automatically wrap over to the next line. Think about how wrapping works for words in text.

So, all you need to do is to restrict the width of that particular div, and it'll never grow wide enough to wrap to the next line.

Unless if you're in IE: in which case it'll do whatever the hell it wants ;)

digitaldreamer 2010-09-15 17:33:30

Answer 2

A:

Floating elements, rather than inline blocks, are probably what you want in this situation. I managed to get what looks like a useful outcome by moving the number div above the up/down div in the code, and then floating both to the left. I then tweaked the margins until the spacing looked decent.

CSS changes:

.number {
    float: left;
}

.thumbs {
    float: left;
    width: 20px;
    margin-left: 20px;
}

.advice-area {
    margin-left: 80px;
}

HTML changes:

<div class="rating-box">
    <div class="number">1</div>
    <div class="thumbs">
        <div> Up </div>
        <div> Down </div>
    </div>
</div>

Samir Talwar 2010-09-15 17:37:19

Answer 3

A:

limit the width on .advice-content and it will show how you want it to.

.advice-content { 
    font-size: 16px; 
    margin: 0 0 10px 0; 
    width:300px;
}

worked for me in IE7 & 8 / Firefox / Opera / Chrome / Safari

NewB 2010-09-15 18:10:11

ansaurus

tags:

views:

answers:

CSS: How do you keep this Div to the right of a float?

related questions