CODEWITHSUNDEEP
htmlcss
noclist
noclist

Reputation: 1819

HTML structure - fill space between 2 floated divs

I am trying to implement a layout where I have left and right floated columns with some content inbetween, filling all available space. What markup/CSS can I use to achieve the following? My content div is always incorrectly wrapping the right floated div below it.

Fiddle of what I'm trying: fiddle

<div style="float: left;">
    left floated content
</div>

<div>
    fill space between left and right floated content
</div>

<div style="float: right;">
    right floated content
</div>

Upvotes: 0

Views: 37

Answers (2)

Vitalii Chmovzh
Vitalii Chmovzh

Reputation: 2943

This is how you can achieve it if those floated divs are fixed width.

<div style="float: left; border: 1px solid blue; width: 150px;">
    left floated content
</div>

<div style="float: right; border: 1px solid green; width:150px;">
    right floated content
</div>

<div style="margin-right:150px; margin-left:150px;">
    fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content 
</div>

Upvotes: 2

Serg Chernata
Serg Chernata

Reputation: 12400

All you have to do is wrap your divs into a parent with display: flex.

#flex {
  display: flex;
}
<div id="flex">
  <div style="float: left; border: 1px solid blue; margin-right: 10px;">
    left floated content
  </div>

  <div>
    fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill space between left and right floated content fill
    space between left and right floated content fill space between left and right floated content
  </div>

  <div style="float: right; border: 1px solid green; margin-left: 10px;">
    right floated content
  </div>
</div>

Upvotes: 2

Related Questions