Remove float: directly on the wrapper

Question

Is there a way to make a liquid layout where, if a floating element does not fit, it moves to the left of the next line? Here is a picture of what I'm trying to achieve:

If there is room for the green and right elements, the red element floats to the right.

If there is not enough space (either the green element is long or the screen is too small), the red element should wrap and align itself to the left.

This is what I have now: fiddle

As you can see, the green element continues to align to the right after wrapping.

code:

<div class="wrap"> <div class="red">long long long long text</div> <div class="green">needs to align to the left</div> </div> .red { display: inline-block; border-color: red; } .green { float: right; width: 80px; border-color: green; } 

Answer 1

You can do this by treating the child divs as internal elements, and then justify / unload the contents of the parent div, for example here . Translation of this solution for this question leads to:

 .wrap { text-align: justify; } .wrap div { vertical-align: top; display: inline-block; text-align: left; } .wrap::after { width: 100%; display: inline-block; content: "."; visibility: hidden; } 

 div { background: lightblue; padding: 5px; margin-bottom: 5px; } .wrap { width: 200px; text-align: justify; } .wrap div { vertical-align: top; display: inline-block; text-align: left; } .red { background: salmon; } .green { width: 80px; background: lightgreen; } .wrap::after { width: 100%; display: inline-block; content: "."; visibility: hidden; } 

 <div class="wrap"> <div class="red">short text</div> <div class="green">needs to align to the right</div> </div> <div class="wrap"> <div class="red">long long long long text</div> <div class="green">needs to align to the left</div> </div> <p>Next element</p> 

Answer 2

Comments

This answer that I give does not work with floats. Instead, I use a more modern CSS3 solution ( so keep an eye on browser compatibility ) using display: flex. Flex offers much simpler options for future changes. It also resizes all divs on the line so that they are the same height and maybe a few more things ^^.

JSFiddle (resize in JSFiddle to see the effect)

HTML

 <div class="wrap"> <div class="red">long long long long text</div> <div class="green">needs to align to the left</div> </div> 

CSS (read comments)

  div { border: 3px solid blue; padding: 5px; } .wrap { display: flex;/*create a flexbox (style it like a block item)*/ display: -webkit-flex; /* Safari */ flex-wrap: wrap;/*items in the flexbox will drop down when they do not fit this div*/ -webkit-flex-wrap: wrap; /* Safari 6.1+ */ justify-content: space-between;/*spaces content on a row keeping an item on the right and one on the left and creating empty space inbetween unless the next item fits in this space in which case the browser will do that (same effect as float: left, only with a better transition)*/ width: 50%; border: 3px solid blue; padding: 5px; } .red { border-color: red; flex: 0 1 180px;/*all you need to know here is that the 3th value is the width of the item*/ -webkit-flex: 0 1 180px; /* Safari 6.1+ */ -ms-flex: 0 1 180px; /* IE 10 */ } .green { border-color: green; flex: 0 1 100px;/*all you need to know here is that the 3th value is the width of the item*/ -webkit-flex: 0 1 100px; /* Safari 6.1+ */ -ms-flex: 0 1 100px; /* IE 10 */ }