1

Please see the fiddle here

The requirement is that red area should expand the remaining width automatically. The problem is blue area is not showing on top aligned.

Is there a way to achieve this without table and javascript?

Note: Very similar to question here Expand div to max width when float:left is set but not the same. In this question there are 2 floated divs.

Community
  • 1
  • 1
destan
  • 4,301
  • 3
  • 35
  • 62
  • There is another way to solve it but it already implemented `table` with divs: http://jsfiddle.net/fa9FJ/ – destan May 29 '14 at 13:39

2 Answers2

4

What if you place the right div before the middle one ?

<div class="content">
  <div class="left">
    <p>Hi, Flo!</p>
 </div>
 <div class="right">foo</div>
 <div class="middle">  
    <p>is</p>
    <p>this</p>
    <p>what</p>
    <p>you are looking for?</p>
  </div>
 </div>

See your updated jsFiddle

To explain :

Using float property is like using position:absolute property. It gets the elements out of the DOM flow. Which means they do not take any space in it.

That's why you have to set a margin-left property on the page content when using a float:left div. If not, the content will be juste under the left div.

At the oposite, your middle div is IN the DOM flow. So it takes all the space (because of his width AND his margin properties). So when you want to add your float:right div, the next available space to do it is below the middle div, and not anymore on the same line.

That's why, when you are using float properties, you have to set them before the "not-floated" content.

M'sieur Toph'
  • 2,534
  • 1
  • 21
  • 34
  • 1
    Thanks for the answer and updated fiddle. Do you know/explain why the order affects the rendered result like this? – destan May 29 '14 at 13:34
1

Here you go

HTML

<div class="green">some content</div>
<div class="blue">some content</div>
<div class="red">some content</div>

CSS

.green {
    float: right;
    width: 300px; /*if you need set the width*/
    margin: 0 0 0 10px;/*if you need set the margin*/
}
.blue {
    float: left;
    width: 300px; /*if you need set the width*/
    margin: 0 10px 0 0;/*if you need set the margin*/
}
.red {overflow: hidden;}
AlexPrinceton
  • 1,173
  • 9
  • 12