Home/ Questions/Q 1103325
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T01:19:34+00:00

In my code below, case #1 works correctly. The advice-area div stays to the

  • 0

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>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 😉

    • 0