0

I have 2 divs in different locations #UserNav and #Search. I want to make them side by side using position: absolute, And I could easily use right, left properties to align, But, The problem is sometimes the first div changes the width which causes to cross the other div

Now i would like to output the width of the first div and apply it on the second div so they are always side by side

For example on the below code using jQuery 

$(document).ready(); {
 var userNav = $('#UserNav').outerWidth();
 $("#Search").css('right', userNav);
};

This works fine, I'm getting the width of UserNav and applying the value on Search div

But, The problem is, now this code functions after the page loads and causes the second div to use the value after SOME milliseconds and its an ugly style :) Is there any other options so the code works faster or before anything else?

Nippledisaster
  • 278
  • 2
  • 18
  • Use `animation` for better effect one your page gets ready. – Mohit Tanwani Oct 02 '16 at 17:50
  • You need responsive CSS. Styles are loaded before the DOM, scripts need to run after. If you try to use JS to manipulate an element before it exists it won't work. – Sterling Archer Oct 02 '16 at 17:50
  • 4
    Why can't this be handled purely by css? – Jecoms Oct 02 '16 at 17:50
  • Well, Two divs, both using absolute position and i want them to be side by side on all times, even if first div changes its width, i want the second div to use an auto value for "right" so the first one doesn't cross over, not really sure if its even possible with css only :/ – Nippledisaster Oct 02 '16 at 18:02
  • 3
    you can try to see this answer : http://stackoverflow.com/questions/1032914/how-to-make-a-div-to-fill-a-remaining-horizontal-space – Salvatore Oct 02 '16 at 18:02
  • 1
    Wow! XD that link helped alot I figured it out, using position relative and float right for both magically aligns both divs while one of them is in nav and another one in a different div somewhere else! lol MAGIC!!!. Nah Im still a big newbie :) learned a lot, Thank you so much guys – Nippledisaster Oct 02 '16 at 18:18

0 Answers0