Reputation: 3461
How do i keep two elements in the same row with fixed right column? I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..
Example: http://jsfiddle.net/Jbbxk/2/
Is there any pure CSS solutions?
NB! Wrap div must have dynamic width! For demostration purposes it has fixed witdh, so it will wrap.
Cheers!
Upvotes: 7
Views: 24778
Reputation: 26294
Here is another solution. Set display: table-cell;
.left {
/*display: left;*/
display: table-cell;
}
.right {
float: right;
display: table-cell;
}
Also, the floating div comes first:
<div class="right">
</div>
<div class="left">
Looooooooong content - pushes right to next row<br>
NOT OK
</div>
Upvotes: 2
Reputation: 3007
This is one common way of doing what you want:
.wrap {
position: relative;
margin: 5px;
border: 1px solid red;
}
.left {
float: left;
background-color: #CCC;
margin-right: 48px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-color: #888;
}
Explanation:
margin-right: [right column width];
position: relative
so the right column position is determined according to it. Upvotes: 11
Reputation: 1652
It's actually easier than I thought, just remove the float:left; from the left class and put your right floating items above them in the HTML
Upvotes: 8
Reputation: 47804
as you have dynamics width, use % like
.left {
float: left;
background-color: #CCC;
width:75%;
}
I have updated the fiddle link : http://jsfiddle.net/Jbbxk/6/
Upvotes: 0