Geek asks and answers

Keep floating divs in line

How to save two elements in one row with fixed right column? I want the right div to be with a fixed size and left column fluid, but when we paste the long text to the left one, then the right goes to the next column.

Example: http://jsfiddle.net/Jbbxk/2/

Are there any clean CSS solutions?

NB! Wrap div must have dynamic width! For demonstration purposes, he fixed witdh, so it will be wrapped.

Hooray!

+5
source share
5 answers

This is one way to do 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 current left column fills the entire width but retains a space for the right column withmargin-right: [right column width];
  • 0, 0 ( )
  • wrap position: relative, .
+8

, , float: left; HTML

+7

. display: table-cell;

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

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

, div:

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

.left {
    max-width: 152px;
}
0

, % like

.left {
float: left;
background-color: #CCC;
width:75%;
}

: http://jsfiddle.net/Jbbxk/6/

0

More articles:


All Articles