How do you align left right a div without using float

Question

When doing something like this     lt div style  float  left   gt Left Div lt  div gt   lt div style  float  right   gt Right Div lt  div gt    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    x000D   x000D   action buttons header a green button  x000D    x000D    x000D   lt div class  change requests container  style  width 950px  important  gt  x000D       lt div class  sidebar  gt  x000D           x000D               x000D                   lt 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   gt Preview New Version lt  a gt  x000D               x000D           x000D           x000D       lt  div gt  x000D       lt div class  content container  gt  x000D           lt div class  content  gt  x000D                           x000D                   lt div class  action buttons header  gt  x000D                       lt a href   changes merge changes 422  class  re publish publish green button  style   x000D      margin  5px 0px 5px auto  x000D    gt Apply Changes lt  a gt  x000D                   lt  div gt  x000D               x000D               x000D   x000D   x000D               lt div id  change list container  gt      x000D   x000D   lt div class  changes table  gt  x000D       x000D           x000D               x000D               lt style type  text css  gt  x000D                   original 492  rl inline added   x000D                      display  none  x000D                    x000D                   x000D                   492 change container  actial suggested text container  x000D                      display  none  x000D                    x000D               lt  style gt  x000D               lt div class  content section header container  gt  x000D                   lt div class  content section header  gt  x000D                       lt a href     class  collapse  name  492  gt  lt  a gt  x000D                      The Zerg    x000D                      Overview x000D                       lt div class  status  id  492 status  gt  x000D                           lt div id  492 status placeholder  gt  x000D                               x000D                           lt  div gt  x000D                       lt  div gt  x000D                   lt  div gt  x000D               lt  div gt  x000D               lt div class  change container  id  492  gt  x000D                   x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    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

User · Answer

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

It is dirty better use the overflow  hidden  hack    lt div class  container  gt     lt div style  float  left   gt Left Div lt  div gt     lt div style  float  right   gt Right Div lt  div gt   lt  div gt    container   overflow  hidden      Or if you are going to do some fancy CSS3 drop-shadow stuff and you get in trouble with the above solution   http   web archive org web 20120414135722 http   fordinteractive com 2009 12 goodbye-overflow-clearing-hack  PS  If you want to go for clean I would rather worry about that inline javascript rather than the overflow  hidden  hack

User · Answer

You could just use a margin-left with a percentage   HTML   lt div class  goleft  gt Left Div lt  div gt   lt div class  goright  gt Right Div lt  div gt    CSS   goright      margin-left 20      goleft      margin-right 20        goleft would be the same as default  but can reverse if needed   text-align doesn t always work as intended for layout options  it s mainly just for text   But is often used for form elements too    The end result of doing this will have a similar effect to a div with float right  and width 80  set  Except  it won t clump together like a float will   Saving the default display properties for the elements that come after

User · Answer

Another solution could be something like following  works depending on your element s display property    HTML    lt div class  left-align  gt Left lt  div gt   lt div class  right-align  gt Right lt  div gt    CSS    left-align     margin-left  0    margin-right  auto     right-align     margin-left  auto    margin-right  0

User · Answer

you could use things like display  inline-block but I think you would need to set up another div to move it over  if there is nothing going to the left of the button you could use margins to move it into place   Alternatively but not a good solution  you could position tags  put the encompassing div as position  relative and then the div of the button as position  absolute  right  0  but like I said this is probably not the best solution  HTML   lt div class  parent  gt     lt div gt Left Div lt  div gt     lt div class  right  gt Right Div lt  div gt   lt  div gt    CSS   parent     position  relative     right       position  absolute      right  0

User · Answer

No need to add extra elements  While flexbox uses very non-intuitive property names if you know what it can do you ll find yourself using it quite often    lt div style  display  flex  justify-content  space-between   gt   lt span gt Item Left lt  span gt   lt span gt Item Right lt  span gt   lt  div gt    Plan on needing this often    align between  display  flex  justify-content  space-between     I see other people using secondary words in the primary position which makes a mess of information hierarchy  If align is the primary task and right  left  and or between are the secondary the class should be  align outer  not  outer align as it will make sense as you vertically scan your code    align between     align left     align outer     align right      Good habits over time will allow you to get to bed sooner than later

User · Answer

In you case here  if you want to right-align that green button  just change the one div to have everything right-aligned    lt div class  action buttons header  style  text-align  right   gt    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

User · Answer

Very useful thing have applied today in my project  One div had to be aligned right  with no floating applied   Applying code made my goal achieved    div     margin-right  0px    margin-left  auto

[html] How do you align left / right a div without using float?

Examples related to html

Examples related to css