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


Tags: css

Problem :

In my code below, case #1 works correctly. The "advice-area" div stays to the right of the "rating-box".

However, case #2 does not work when the text extends beyond one line. This causes the "advice-area" div to move below the "rating-box"

What is the best way to fix this? Thanks.

<html>
<head>
   <style type="text/css">
    .wrapper {
        width: 400px;
        list-style: none;
    }
    .row {
        border-bottom: 1px solid #E5E5E5;
        padding: 15px  0;
        font-size: 14px;
        clear: both;
    }
    .rating-box {
        float: left;
        height: 70px;
        position: relative;
        width: 60px;
    }
    .thumbs {
        float: right;
        width: 20px;
    }
    .number {
        position: absolute;
        top: 16px;
        left: 5px;
    }
    .advice-area {
        display: inline-block;
        margin-left: 35px;
    }
    .advice-content {
        font-size: 16px;
        margin: 0 0 10px 0;
    }
    .advice-action {
        display: inline-block;
    }
    .add-box {
        display: inline;
        margin-left: 30px;
    }
    .add-box a {
        display: inline-block;
    }
    .share-button {
        display: inline;
        margin-left: 30px;
        cursor: pointer;
    }
    .flag {
        display: inline;
        margin-left: 30px;
        cursor: pointer;
    }
   </style>
</head>

<body>
    <ul class="wrapper">
        <li class="row">
            <div class="rating-box">
                <div class="thumbs">
                    <div> Up </div>
                    <div> Down </div>
                </div>
                <div class="number">1</div>
            </div>
            <div class="advice-area">
                <div class="advice-content">Case #1: This is correct</div>
                <div class="advice-action">
                    <div class="add-box"><a href="#">Plan</a></div>
                    <div class="share-button"><a href="#"> Share </a> </div>
                    <div class="flag"> <a href="#">Flag</a> </div>
                </div>
            </div>
        </li> 
        <li class="row">
            <div class="rating-box">
                <div class="thumbs">
                    <div> Up </div>
                    <div> Down </div>
                </div>
                <div class="number">2</div>
            </div>
            <div class="advice-area">
                <div class="advice-content">Case #2: But this really long text does not want to stay right next to the "Up" and "Down" links</div>
                <div class="advice-action">
                    <div class="add-box"><a href="#">Plan</a></div>
                    <div class="share-button"><a href="#"> Share </a> </div>
                    <div class="flag"> <a href="#">Flag</a> </div>
                </div>
            </div>
        </li>
    </ul>
</body>



Solution :

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 ;)


    CSS Howto..

    How to prevent HTML elements from being pushed down the page

    How to vertically center a div for all browsers?

    How to animate to position fixed?

    How to create popups in css /Javascript?

    How do i use a simple string variable with jquery?

    How to style author id in WordPress?

    How does Twitter put labels inside textboxes?

    How to Show Menu after full size window in responsive Design

    css/html, how to scale and center a logo image

    How to use CSS to position div popup when using :hover…?

    How to get All Defined CSS Selectors for a given DOM Element?

    How to override GWT obfuscated style for DataGrid header

    CSS Horizontal Menu has wrong x-position, how to put directly under parent menu?

    Fixed Header Scrollable Table - How to preserve horizontal scroll position using css jquery on page loads

    How to make a horizontal list start in the center of the page?

    Should I teach CSS layout directly to new learners or should I first teach how to make layout with tables, then table-less layouts?

    How to generate width CSS from JavaScript / C#

    How can I make a photo which fit the div shape using css

    CSS: How to place next to each other 2 images with 50 % width?

    How to use random array output as a for-loop CSS attribute in jQuery

    Using CSS, how can I style a div tag to full the width, even when the viewport is scaled?

    how to write this code in right way in javascript

    How to locate which css include is used for an element

    How to change this FontAwesome to image in Css?

    How to change color of SVG image using CSS (jQuery SVG image replacement)?

    How to center css menu and get rid of left margin space in ie?

    How to disable css warning “Unknown property” in Eclipse Mars?

    How can I write in CSS if I'm using list tag for this? [closed]

    how to install bootstrap-select on server

    How to add -moz & -o prefixes to code containing only -webkit tags