The block is in a block, 100% wide. When the title block is filled with very long text, and the line wrapping is canceled, it expands to 100%, is transferred to a new line, and the blocks following it are also transferred.

.month-num, .title { float: left; } .persone, .start-date, .end-date { float: right; } .clear { clear:both; } 
 <div class=month> <div class=month-num>2</div> <div class=title>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div class=persone>geqo</div> <div class=start-date>21.11.12</div> <div class=end-date>22.11.12</div> <div class=clear></div> </div>

How to make it use only free space without specifying a fixed width for other blocks?

html, css - result

  • do not cancel line wrapping - Abmin
  • In order to hide the extra text, the width of the block must be specified. This block has no width, so it expands to 100%. Canceling a ban on line breaks will not help. - AccessDenied
  • Can you write code instead of images? - Abmin

1 answer 1

Without the use of flexbox, “as before”, this was achieved using a combination of wrappers with float: left / right + overflow: hidden .

To see the rubber solution, expand to full screen and move the edge of the browser window.

 .month-num { float: left; margin-right: 10px; } .persone, .start-date, .end-date { float: right; margin-left: 10px; } .clear { clear: both; } .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .month__wrap-left { overflow: hidden; } .month__wrap-right { float: right; } 
 <div class=month> <div class=month__wrap-right> <div class=persone>geqo</div> <div class=start-date>21.11.12</div> <div class=end-date>22.11.12</div> </div> <div class=month__wrap-left> <div class=month-num>2</div> <div class=title>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> <div class=clear></div> </div>

  • Thanks, helped. In the meantime, it was implemented through @ media-requests with rigid sizes. - AccessDenied