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

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:

_x000D_
_x000D_
.action_buttons_header a.green_button{_x000D_
 _x000D_
}
_x000D_
<div class="change_requests_container" style="width:950px !important">_x000D_
    <div class="sidebar">_x000D_
        _x000D_
            _x000D_
                <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>_x000D_
            _x000D_
        _x000D_
        _x000D_
    </div>_x000D_
    <div class="content_container">_x000D_
        <div class="content">_x000D_
                        _x000D_
                <div class="action_buttons_header">_x000D_
                    <a href="/changes/merge_changes/422" class="re_publish publish green_button" style="_x000D_
    margin: 5px 0px 5px auto;_x000D_
">Apply Changes</a>_x000D_
                </div>_x000D_
            _x000D_
            _x000D_
_x000D_
_x000D_
            <div id="change_list_container">    _x000D_
_x000D_
<div class="changes_table">_x000D_
    _x000D_
        _x000D_
            _x000D_
            <style type="text/css">_x000D_
                #original_492 .rl_inline_added {_x000D_
                    display: none;_x000D_
                }_x000D_
                _x000D_
                #492.change_container .actial_suggested_text_container{_x000D_
                    display: none;_x000D_
                }_x000D_
            </style>_x000D_
            <div class="content_section_header_container">_x000D_
                <div class="content_section_header">_x000D_
                    <a href="#" class="collapse" name="492"></a>_x000D_
                    The Zerg | _x000D_
                    Overview_x000D_
                    <div class="status" id="492_status">_x000D_
                        <div id="492_status_placeholder">_x000D_
                            _x000D_
                        </div>_x000D_
                    </div>_x000D_
                </div>_x000D_
            </div>_x000D_
            <div class="change_container" id="492">_x000D_
                _x000D_
            </div>_x000D_
        </div>_x000D_
    </div>_x000D_
</div>
_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.

This question is related to html css

The answer is


You could just use a margin-left with a percentage.

HTML

<div class="goleft">Left Div</div>
<div class="goright">Right Div</div>

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).


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.

<div style="display: flex; justify-content: space-between;">
<span>Item Left</span>
<span>Item Right</span>
</div>

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.


It is dirty better use the overflow: hidden; hack:

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

.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 :)


Another solution could be something like following (works depending on your element's display property):

HTML:

<div class="left-align">Left</div>
<div class="right-align">Right</div>

CSS:

.left-align {
  margin-left: 0;
  margin-right: auto;
}
.right-align {
  margin-left: auto;
  margin-right: 0;
}

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

<div class="parent">
  <div>Left Div</div>
  <div class="right">Right Div</div>
</div>

CSS

.parent {
  position: relative;
}
.right {
    position: absolute;
    right: 0;
}

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;
}

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

_x000D_
_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_
_x000D_
_x000D_