2 speakers

Question

css

There is a container, new divs with classes left or right arrive in it, the
width is 49%, the height is different, they come in random order.
Is there a way, using only css , to position them each on their own side of the screen
and so that there are no vertical gaps
example:

<div class='container'>
   <div class='left'>constain 3 lines</div> 
   <div class='right'>constain 1 line</div> 
   <div class='left'>constain 5 lines</div> 
   <div class='right'>constain 4 lines</div> 
   <div class='right'>constain 2 lines</div> 
   <div class='left'>constain 5 lines</div> 
   <div class='right'>constain 4 lines</div> 
</div>

Thank you.

Answer 1

no, no.
make 2 columns and shove blocks there.

Answer 2

But what if the incoming data is redistributed into a subcontainer for elements with classes left and right before insertion?
Or, after insertion, jQuery can do this line by line on left and right, if this is a JS interface.
Here is a post , there, I suppose there is an opportunity that you need, but this is all only the future. I have an improved version of the plugin for Template Layout, if it suits you, I can share it. It just won't work that way (yet).

Answer 3

Instead of 49%, try setting the width to 50%, complementing it with a negative padding in the opposite direction to bypass the specifics of percentage rounding in IE:

.left,
.right {width: 50%; }

.left {
    float: left;
    margin-right: -1px;
}

.right {
    float: right;
    margin-left: -1px;
}