CODEWITHSUNDEEP
htmlcsscss-float
Kristian
Kristian

Reputation: 3461

Keep floating divs on same line

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

Answers (5)

Chloe
Chloe

Reputation: 26294

Here is another solution. Set display: table-cell;

http://jsfiddle.net/Jbbxk/54/

.left {
    /*display: left;*/
    display: table-cell;
}
.right {
    float: right;
    display: table-cell;
}

Also, the floating div comes first:

<div class="right">
    &nbsp;
</div>
<div class="left">
    Looooooooong content - pushes right to next row<br>
    NOT OK
</div>

Upvotes: 2

pacha
pacha

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:

  • The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
  • The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
  • The wrap div is assigned position: relative so the right column position is determined according to it.

Upvotes: 11

Andrew Morris
Andrew Morris

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

update fiddle

Upvotes: 8

Yasser Shaikh
Yasser Shaikh

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

32bitfloat
32bitfloat

Reputation: 771

You can do

.left {
    max-width: 152px;
}

Upvotes: 0

Related Questions