CODEWITHSUNDEEP
htmlcsstwitter-bootstrapcss-float
Arturo Hernandez
Arturo Hernandez

Reputation: 2869

How to prevent break in div with float right? (bootstrap)

I have the following HTML. And the text (tidbit) on the right keeps dropping off to the next line. This is in chrome. Is there a way to keep what is inside of the pull-right div together in one line? here is the jsFiddle.

<div class="container" style="width:500px;>
    <div class="controls controls-row">
        <span class="add-on">This can be quite long</span>
        <div class="pull-right">
            <input class="input-mini" name="Amount" type="number" />
            <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
            <div style="text-align:right; width:40px;">tidbit</div>
        </div>
    </div>
</diV>

Upvotes: 6

Views: 21452

Answers (4)

Ubaid Ashraf
Ubaid Ashraf

Reputation: 885

What is the combined width of div class pullright controls. It is exceeding 500px i think.

If width of these 3 exceeds 500px, tidbit text will move to next line. So control width

Upvotes: 0

Duncan Walker
Duncan Walker

Reputation: 2201

Remove the div tag around tidbit and, if necessary, wrap the tidbit in a span - JSfiddle

<div class="container" style="width:500px;>
    <div class="controls controls-row">
        <span class="add-on">This can be quite long</span>
        <div class="pull-right">
            <input class="input-mini" name="Amount" type="number" />
            <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
            <span>tidbit</span><!--Move this the before or after the button-->
        </div>
    </div>
</diV>

Upvotes: 0

Sirko
Sirko

Reputation: 74096

You can do this with two corrections:

  1. Set display: inline-block in the "tidbit" div.
  2. Set white-space: nowrap to the pull-right container.

 

<div class="container" style="width:500px;>
            <div class="controls controls-row">
            <span class="add-on">This can be quite long</span>
            <div class="pull-right">
                <input class="input-mini" name="Amount" type="number" />
                <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
                <div style="text-align:right; width:40px; display: inline-block;">tidbit</div>
            </div>
        </div>
</diV>

 

.pull-right{
    white-space:nowrap;
}

Example Fiddle

Upvotes: 7

Dhiraj
Dhiraj

Reputation: 33628

You can perhaps add pull-left and pull-right inside the pull-right parent container

<div class="container" style="width:500px;">
    <div class="controls controls-row"> <span class="add-on">This can be quite long</span>
        <div class="pull-right">
            <div class="pull-left">
                <input class="input-mini" name="Amount" type="number" />
                <button type="button" class="btn" style="margin-bottom: 10px">Add</button>
            </div>
            <div class="pull-right" style="text-align:right; width:40px;">tidbit</div>
        </div>
    </div>
</diV>

Demo here

Hope this helps

Upvotes: 5

Related Questions