Float Right and Position Absolute Doesn't Work Together

Float right and position absolute doesn't work together

Use

position:absolute; right: 0;

No need for float:right with absolute positioning

Also, make sure the parent element is set to position:relative;

Float: Right Not Working

You are using position:absolute; as well as floats for the same elements. Try using just floats.

DEMO

Float right changing position of next element

Try this code:

.outer{
        display:flex;
        flex-direction:column;
        align-items:flex-end;
      }
.inner1 {
         width: 50%;
         height: 100px;
         border: 5px solid red;
        }
.inner2{
       width: 50%;
  }

<div class="outer">
<div class="inner1">

</div>
<div class="inner2">
Text that goes up after float.
</div>
</div>

CSS float right not working correctly

you need to wrap your text inside div and float it left while wrapper div should have height, and I've also added line height for vertical alignment

<div style="border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: gray;height:30px;">
   <div style="float:left;line-height:30px;">Contact Details</div>

    <button type="button" class="edit_button" style="float: right;">My Button</button>

</div>

also js fiddle here =)
http://jsfiddle.net/xQgSm/

Relative positioning + Absolute positioning VS Floats Left an Float Right (Which approach do you use in your CSS)?

I my experience using absolute positioning works well on elements you are in 100% control of in terms of size; like a logo, a meny, rss links and things like this. Then you can place these elements exactly where you want them.

I prefer using float when I am displaying dynamic content on a page, since the size of the element can change, and the placement of all elements in relation works really good with floats. Just remember to clear the floats when needed!

float:right doesn't work even though the anchor element is within a div

It is simply because float doesn't work on flex items. Your .side-nav has the display of flex. If you change it to block, it will work.

But my suggestion is not to use float at all. Because float is mainly for old newspaper-like text-image combination and using it to "structure the elements" was just a hack because of the lack of the flex-box.

So either stick with one of them (float or flex-box) Or better: make the close icon an absolutely positioned element to get it out of the flow:

*{
    box-sizing: border-box;
}

html {
    background-color: #dfdfdf;
}

body {
    padding: 0;
    margin: 0;
}

.navbar {
    display:flex;
    justify-content: space-between; 
    align-items: center;
    background-color: #333;
}

.logo {
    font-size: 1.5rem;
    margin: .5rem;
    color:white;
}

.navbar-links ul{
    display:flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-links li a{
    text-decoration: none;
    color:white;
    display: block;
    padding: 1rem;
}

.toggle-button {
    position: absolute;
    top: .75rem;
    left: 1rem;
    width: 30px;
    height: 21px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    display: none;
}

.toggle-button .bar {
    background-color:white;
    width: 100%;
    height: 3px;
}

.side-nav {
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #9ed39f;
    overflow: hidden;
    transition: 0.5s;
    display: flex;
}

.side-nav .btn-close {
    font-size: 36px;
    border-bottom: none;
    text-decoration: none;
    color: #fff;
    margin-right:25px;
    position: absolute;
    right: 0;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Responsive Sidebar</title>
  </head>
  <body>
    <nav class="navbar">
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="logo">Brand Name</div>
      <div class="navbar-links">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Abvout</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </nav>
    <div class="side-nav">
      <a href="#" class="btn-close">×</a>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
    <main>
     epturi, quod illo. Voluptatum
      alias possimus ipsum omnis. Aspernatur animi debitis natus sed
      exercitationem repudiandae excepturi, ipsum hi
    </main>
  </body>
</html>

Why is float:right making the div float to the left?

Using float with absolute positioning doesn't really make sense. I think what you want is right:0 instead of float:right

#container {  position: relative;  border: solid;  width: 70%;  height: 40%;  overflow: auto;}#inner {  position: absolute;  border: solid;  bottom: 0;  right:0;  width: 30%;  height: 30%;}body,html {  height: 100%;}

<div id="container">  <div id="inner">    ABC  </div></div>

Float Right and Position Absolute Doesn't Work Together