B
B
Borgius2012-10-01 23:38:47
css
Borgius, 2012-10-01 23:38:47

2 speakers

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 the question

In order to leave comments, you need to log in

3 answer(s)
S
SilentImp, 2012-10-01
@Borgius

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

N
Nazar Mokrinsky, 2012-10-02
@nazarpc

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).

M
MT, 2012-10-02
@MTonly

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;
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question