How do you align left / right div without using float?

Question

When you do 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 seems very dirty to me.

So is there a way to align without using 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 need a green button to the right of the horizontal panel, but it should be as clean as possible.

Just trying to learn how to make CSS elegant, neat, etc.

Answer 1

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

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

Div already occupies the entire width of this section, so just slide the green button to the right, aligning the text to the right.

Answer 2

Another way to do something similar is to use flexbox on the wrapper element, i.e.

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

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

Answer 3

you can use things like display: inline-block , but I think you will need to set up another div to move it, if there is nothing left of the button, you can use the fields to move them into place.

Alternatively, but not a very good solution, you can position the tags; put the div div as position: relative , and then the button div as position: absolute; right: 0 position: absolute; right: 0 , but as 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; } 

Answer 4

It is more dirty to use 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 make some fancy CSS3 tags and you have problems 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 clean, I would rather worry about inline javascript, not overflow: hidden; hack :)

Answer 5

Another solution might be something like the following (it works depending on the display property of the element):

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

Answer 6

You can simply use the margin on the left and the percentage.

HTML

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

CSS

 .goright{ margin-left:20%; } .goleft{ margin-right:20%; } 

(goleft will be the same as the default, but may change if necessary)

text-align does not always work as intended for layout options, mainly for text. (But often used for form elements).

The end result of this will have a similar effect with a div with float: right; and width: 80%. In addition, it will not shrink like a float. (Save default display properties for the following items).

Answer 7

No need to add additional items. Although flexbox uses very unintuitive property names, if you know what it can do, you will find that you use it quite often.

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

Do you plan to need this often?

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

I see that other people use secondary words in the main position, which creates a mess in the information hierarchy. If alignment is the primary task, and the right, left and / or between the secondary, then the class should be .align_outer , not .outer_align , as this will make sense when scanning the code vertically:

 .align_between {} .align_left {} .align_outer {} .align_right {} 

Good habits will let you go to bed sooner rather than later.

Answer 8

A very useful thing was applied today in my project. One div should be aligned to the right, without using a float.

Application of the code made my goal achieved:

 .div { margin-right: 0px; margin-left: auto; }