How do you align a div vertically without using float?

Question

When doing something like this:

<div style="float: left;">Left Div</div> <div style="float: right;">Right Div</div> 

I have to use an empty div with

clear: both; 

which feels very dirty to me.

So, is there a way to align without the use of float?

Here is my code:

.action_buttons_header a.green_button{     }

<div class="change_requests_container" style="width:950px !important">      <div class="sidebar">                                          <a href="/view/preview_unpublished_revision/422?klass=Proposal" class="preview sidebar_button_large action_button" name="preview" onclick="window.open(this.href);return false;">Preview New Version</a>                                        </div>      <div class="content_container">          <div class="content">                                            <div class="action_buttons_header">                      <a href="/changes/merge_changes/422" class="re_publish publish green_button" style="      margin: 5px 0px 5px auto;  ">Apply Changes</a>                  </div>                                              <div id="change_list_container">        <div class="changes_table">                                            <style type="text/css">                  #original_492 .rl_inline_added {                      display: none;                  }                                    #492.change_container .actial_suggested_text_container{                      display: none;                  }              </style>              <div class="content_section_header_container">                  <div class="content_section_header">                      <a href="#" class="collapse" name="492"></a>                      The Zerg |                       Overview                      <div class="status" id="492_status">                          <div id="492_status_placeholder">                                                        </div>                      </div>                  </div>              </div>              <div class="change_container" id="492">                                </div>          </div>      </div>  </div>

I want the green button on the right of the horizontal bar that it's in but in the cleanest way possible.

Just trying to learn how to do CSS elegantly, cleanly, etc.

Answer 1

Another way to do something similar is with flexbox on a wrapper element, i.e.,

 .row {          display: flex;          justify-content: space-between;      }

  <div class="row">          <div>Left</div>          <div>Right</div>      </div>       

Answer 2

In you case here, if you want to right-align that green button, just change the one div to have everything right-aligned:

<div class="action_buttons_header" style="text-align: right;"> 

The div is already taking up the full width of that section, so just shift the green button the right by right-aligning the text.