Positionner des éléments en absolute

bonjour,

je cherche comment bien positionner mes deux éléments (les deux aside à droite et à gauche) sur l'image .
si vous regarder bien sur la premiere image, sur un écran normal les deux éléments sont bien placés.
sur la deuxième image (sur un écran plus GRAND) les deux éléments sont carrément mal placés.

mes deux éléments (les aside) sont mis en position absolute dans une section de position relative

je vous passe le code pour que tout soit clair :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<section class="container relative"> 
        <?php if (MDETECT_SUPPORT == "desktop"): ?>
 
            <aside class="right-aside  uppercase text-center">
                <div class="champi-text"> 
                    <h4 class="brown fz200 bold"> <?php echo __('pssst... '); ?> </h4>
                    <h4 class="brown fz200 bold"> <?php echo __('cliquez sur'); ?> </h4>
                    <h4 class="brown fz200 bold"> <?php echo __('le champignon'); ?> </h4>
                </div>
            </aside> 
            <aside class="left-aside brown padding10 text-center OSWALD">
                <h4 class="bold uppercase"> <?php echo __('50%'); ?></h4>  
                <h4 class="bold uppercase inline fz180"> <?php echo __('<span class="inline-block fz120 letter-spacing">sur votre</span><br> <span class="fz110">abonnement</span><br><span class="fz120"> 6 et 12 mois</span>'); ?></h4>  <br>
                <img class="fleche" src="<?php echo url('image') . DOSSIER_LANGUE; ?>/courslive3/millecinqcent/desktop/fleche-promo_.png"> <br> 
                <h4 class="bold marginB20 codeichef">  <?php echo __('avec le code <br><span> 1500ICHEF</span>'); ?> </h4>
                <a href="<?php echo l(array('controller' => 'courslive3', 'action' => 'landing2'), false, true)."?1500ICHEF"; ?>" class="yellow-btn uppercase bold" ><?php echo __('je m\'abonne'); ?></a>
            </aside>  
        <?php endif; ?> 
.....

CODE JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 $(window).scroll(function () {
//        var height = $('.bg-champi').height(); 
        var scrollTop = $(window).scrollTop();  
        var scrollDown = document.body.offsetHeight;
          if(scrollTop<550){
                $('.left-aside').css({ 'position': 'absolute', 'top' : '-300px', 'left' : '-18%' });
                $('.right-aside').css({ 'position': 'absolute', 'top' : '-300px', 'right' : '-18%'});
          }
          else if(scrollTop>=550){
                $('.left-aside').css({ 'position': 'fixed', 'top' : '121px' , 'left' : '0%' });
                $('.right-aside').css({ 'position': 'fixed', 'top' : '140px' ,'right' : '0%'});
          }
         if ((window.innerHeight + window.scrollY) > scrollDown-390) {
                $('.left-aside').css({ 'position': 'absolute', 'top' : '200px', 'left' : '-18%' });
                $('.right-aside').css({ 'position': 'absolute', 'top' : '300px', 'right' : '-18%'});
            }
 
 
    });

j 'essai de bien les positionner sur n'importe quelle taille d'écran, les centrer par exemple chacun de son coté .

merci