CODEWITHSUNDEEP
htmlcss
NullVoxPopuli
NullVoxPopuli

Reputation: 65143

How do you align a div vertically 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:

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

Upvotes: 83

Views: 194707

Answers (8)

Rafdro
Rafdro

Reputation: 790

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

Upvotes: 5

myrcutio
myrcutio

Reputation: 1055

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>

Upvotes: 72

John
John

Reputation: 13739

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.

Upvotes: 1

Chris James Champeau
Chris James Champeau

Reputation: 994

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

Upvotes: 19

Micka&#235;l R.
Micka&#235;l R.

Reputation: 344

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

Upvotes: 10

josh.thomson
josh.thomson

Reputation: 905

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

Upvotes: 3

PeeHaa
PeeHaa

Reputation: 72672

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

Upvotes: 13

DCNYAM
DCNYAM

Reputation: 12126

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.

Upvotes: 64

Related Questions