Positioning elements on opposite sides of the block

Hello dear readers. Today I will tell you about a little-known way to spread two elements on different sides of the block in which they are located. For example like this



Until some time I, like many of you, used in two ways:

1. The first method is based on the float property. The left block is given float: left, the right float: right
2. The second way is to absolute positioning of the right block, with the parameters right: 0 or left: 100%, margin-left: - (block width)

The main drawback of both methods is that if the blocks need to be aligned along the lower border or along the middle line relative to each other, then it is necessary to shift the blocks vertically using the selection method, asking them either top: anyValue or margin-top: anyValue. And the first method, plus everything else, has another one, not only a disadvantage, but an unpleasant trifle. This is the need to clear the stream using clearFix, overflow or additional diva.

So way number 3. To begin with the code:

HTML proper

Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >

1. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
2. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >
3. Copy Source | Copy HTML < div class ="wrap"> < div class ="left">< a href ="#"> </ a ></ div >< div class ="right">< a href ="#"> </ a ></ div > </ div >

CSS proper

Copy Source | Copy HTML

1. .wrap {
2. width : 500px ;
3. background : # 555 ;
4. height : 500px ;
5. }
6. .left , .right {
7. display : inline - block ;
8. // display: inline;
9. // zoom: 1;
10. width : 100% ;
11. margin-right : -100% ;
12. vertical-align : bottom ;
13. }
14. .right {
15. text-align : right ;
16. }
17. .left a , .right a { display : inline - block ; position : relative ; }
18. .left a { width : 200px ; height : 100px ; background : green ; }
19. .right a { width : 100px ; height : 200px ; background : pink ; }

Explanations

The essence of the method is to superimpose the blocks on each other by means of a margin-right: -100% and align the contents of the right-hand block with the help of text-align: right.

It is desirable to write both blocks (right and left) in one line, otherwise, because of the newline character, the right block will slightly go beyond the boundaries of the parent block.

Links must be set to position: relative, otherwise, due to overlapping blocks, some may be non-clickable.

Pluses of the way

The main advantage is that vertical-align now starts working for our blocks. And we can easily align them and the upper boundary and the lower and center.

')

Cons of the way

And the main disadvantage is that, using this method, we must be firmly sure that the blocks will not increase to such an extent that they will overlap each other (by the way, the float method does not have this disadvantage, since the contents of the blocks, they will stand under each other).



Link to the finished example

PS

I have not seen such a method on the Internet, so please: if someone finds a similar article published earlier, please let me know.

Upd.

In the comments, my attention was paid to the method using text-align: justify. This method is also good, but it has two drawbacks. Firstly, it requires the introduction of an additional element that emulates the last line of the text block, and secondly, it will not work in IE6-IE7 for block elements.