Clever Geek Handbook

CSS - Two floating divs on one line, one with wrapping text

Here's the problem: I want to have 2 floating divs on one line. The right div can be fixed width. The left div should take all the rest of the space and wrap around the text inside. The width of the parent container is variable, so I cannot set the width in both divs.

http://jsfiddle.net/af6wP/

div{border: 1px solid black}
.left{float: left}
.right{float: right}
<div class="left">
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 
</div>

<div class="right">
    short text
</div>
+3


source to share


2 answers


It looks like you only need one plugin:

div{border: 1px solid black}
.left{ overflow: hidden; }
.right{float: right}


Example http://jsfiddle.net/KmPjL/

+10


source


EDIT

Got a better solution for fixed width in right div:

Html

<div class="left">
    <div class="right">
        short text
    </div>
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 

</div>


Css

div{border: 1px solid black;}
.right{float:right;width:24%;}

See updated fiddle

With long text on the right container, you will need to use clearfix .

0


source






More articles:


All Articles