Floating panels left and right CSS

Question

I need to put two floating panels on a Map but the float: right doesn't work. please help.

I tried everything but seems like the position: absolute disable the float: right or something.

Is there any way to align the second panel (#floating-panel2) to the right without changing the align of the first panel (#floating-panel1) ?

I need something like this:

And this is my html and my css:

  #wrapper { position: relative; } #floating-panel1 { position: absolute; width: 265px; top: 55px; left: 5px; z-index: 5000; background-color: rgb(66, 72, 79); padding: 5px; border: 1px solid rgb(66, 72, 79); border-radius: 1px; } #floating-panel2 { position: absolute; width: 265px; top: 55px; left: 0px; z-index: 5000; background-color: rgb(66, 72, 79); padding: 5px; border: 1px solid rgb(66, 72, 79); border-radius: 1px; float:right; } 

 <div id="wrapper" style="height: 100vh"> <div id="floating-panel1"> <h1>PANEL 1</h1> </div> <div id="floating-panel2"> <h1>PANEL 2</h1> </div> </div> 

Please Help

Answer 1

Is this what you're looking for? If yes, all you had to do is change left: 5px to right: 5px on the second panel.

 #wrapper { position: relative; } #floating-panel1 { position: absolute; width: 265px; top: 55px; left: 5px; z-index: 5000; background-color: rgb(66, 72, 79); padding: 5px; border: 1px solid rgb(66, 72, 79); border-radius: 1px; } #floating-panel2 { position: absolute; width: 265px; top: 55px; right: 5px; z-index: 5000; background-color: rgb(66, 72, 79); padding: 5px; border: 1px solid rgb(66, 72, 79); border-radius: 1px; } 

 <div id="wrapper" style="height: 100vh"> <div id="floating-panel1"> <h1>PANEL 1</h1> </div> <div id="floating-panel2"> <h1>PANEL 2</h1> </div> </div> 

Answer 2

Display div with float:left and float:right and add the position to div1 position:absolute and div2 position:relative.

  #wrapper { position: relative; } #floating-panel1 { width: 265px; top: 55px; float:left; position:absolute; z-index: 5000; background-color: rgb(66, 72, 79); padding: 5px; border: 1px solid rgb(66, 72, 79); border-radius: 1px; } #floating-panel2 { width: 265px; top: 55px; float:right; position:relative; z-index: 5000; background-color: rgb(66, 72, 79); padding: 5px; border: 1px solid rgb(66, 72, 79); border-radius: 1px; float:right; } 

 <div id="wrapper" style="height: 100vh"> <div id="floating-panel1"> <h1>PANEL 1</h1> </div> <div id="floating-panel2"> <h1>PANEL 2</h1> </div> </div>