How to vertically align floating divs to the bottom?
This will do the trick:
#bars {
display: table-cell;
border: solid 1px black;
}
#bars > div {
display: inline-block;
vertical-align: bottom;
width: 5px;
background-color: #999;
margin-left: 2px;
}
#bars > div:first-child {
margin-left: 0;
}
It uses display: table-cell;
on the parent div, which by default has vertical-align: baseline;
applied. This changes the need for float: left;
on the child divs and allows us to use display: inline-block;
. This also removes the need for your CSS clear fix.
EDIT - Per @thirtydot's comments, adding vertical-align: bottom;
to the child divs removes the gap at the bottom.
Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell;
so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!
Align floating divs to the bottom
you can do something like this
JS Fiddle
.fl {
position:absolute;
bottom:0;
}
.wrap{
width:100%;
display:inline-block;
position:relative;
}
added .wrap
class for <div width="100%" class="clear wrap">
(parent div) to clear the float of .fr
or will taking 0px
height
vertical-align:bottom WITH float:left
Vertical align only works with inline block elements, floated elements ignore the vertical align property.
Update the box class with the following:
.box {
display: inline-block;
vertical-align: bottom;
width:80px;
}
I would make them all inline block elements and remove the whitespace with one of these techniques.
Updated fiddle: http://jsfiddle.net/9rcnLb8n/
Alternatively you could use flexbox with the align-self: flex-end;
property.
CSS vertically align floating divs
You'll have no luck with floated elements. They don't obey vertical-align
.
You need display:inline-block
instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block;
as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block
does.
I recommend this:
Set the font-size
of the containing element to 0
(zero) and reset the font-size
to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
How to make text vertical align to the bottom in floating divs?
Added a <div class="inner">
, and set it as display:table-cell
+ vertical-align:bottom
, see the following demo and snippet.
Edit: also added calc()
to make the photo div is only as wide as the width of the photo and the text div takes up all of the remaining width automatically.
JsFiddle Example
.wrapper { border: 1px solid blue; overflow: auto;}.wrapper .text { float: left; width: calc(100% - 140px);}.wrapper .photo { float: right;}.wrapper .inner { display: table-cell; height: 140px; vertical-align: bottom;}.wrapper .inner img { display: block;}
<div class="wrapper"> <div class="text"> <div class="inner">Text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom, text aligned at bottom.</div> </div> <div class="photo"> <div class="inner"><img id="photograph" src="//dummyimage.com/140" /></div> </div></div>
Vertically align 2 floating divs with flexible height
Here's how you could make it flexible (no fixed heights, just keep those .column containers vertically centered regardless of their content): set .column to display:inline-block and to vertical-align: middle inside your table-cell .wrap div.
.column {
display: inline-block;
width: 45%;
height: auto;
text-align: center;
border: 1px solid black;
vertical-align: middle;
}
http://jsfiddle.net/VLRpc/2/
Vertical alignment of floating divs
flexbox
can do that quite easily
* { box-sizing: border-box;}.wrap { width: 80%; margin: 5vh auto; border: 1px solid grey; display: flex;}.col { display: flex; flex-direction: column; flex: 1; border: 1px solid green; padding: 1em; margin: 1em;}.left,.right { flex: 2; /* just a number...means they are twice as wide as the middle */}.middle { justify-content: center;}header { flex: 0 0 25px; background: red; margin-bottom: 1em;}nav { flex: 0 0 35px; background: blue; margin-bottom: 1em;}.content { flex: 0 0 auto; background: orange; margin-bottom: 1em;}footer { height: 50px; background: green; width: 50px; align-self: flex-end; width: 100%; margin-top: auto;}
<div class="wrap"> <div class="col left"> <header></header> <nav></nav> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, impedit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate cum magnam maiores unde consequuntur, similique deserunt delectus omnis expedita in, laborum praesentium consequatur eius adipisci saepe rerum reprehenderit nostrum temporibus.</div> <footer></footer> </div> <div class="col middle"> <div class="content">Lorem ipsum dolor sit amet.</div> </div> <div class="col right"> <header></header> <nav></nav> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus, modi!</div> <footer></footer> </div></div>
How to align floated elements such that their bottoms match
Many of the other answers tell you to correct the difference by applying a static number for padding/line-height which I think is a bad solution. If you "correct" a difference with a static number and in the future the difference changes you have to change all the static numbers. Imagine you apply a padding to the Date
div
and later the font-size of the h2
changes, you'd have to change the padding.
Try this:
<div class="wrapper">
<h2>Post 1</h2>
<span class="date">February 28, 2011</span>
</div>
And css:
.post h2 {
display: inline-block;
}
.wrapper {
position: relative;
}
.date {
display: inline-block;
position: absolute;
right: 0;
bottom: 0;
}
How to get float:right button to vertically align in the middle
The cleanest way to do that is to use flex
like this:
Add
display: flex
to your outer divpanel-footer
[Check code below]Remove the float and use
text-align:right
on the span for the button. [Check code below]Add
align-self: center
to the inner span. [Check code below]
For 1:
.panel-footer {
height: 70px;
border: solid;
display:flex;
}
For 2:
.header-footer-item {
text-align: right;
}
For 3:
.header-footer-item {
align-self: center;
}
jsFiddle: https://jsfiddle.net/d1vrqkn9/4/
Related Topics
Is There a Reason Why CSS Doesn't Support Ids and Classes, Starting from Numbers
Xhtml/Css: How to Make Inner Div Get 100% Width Minus Another Div Width
Two CSS Files Defining Same Class
Ml-Auto Is Not Pushing Navbar Links to the Right
How to Remove Space (Margin) Above HTML Header
Differencebetween the Hidden Attribute (Html5) and the Display:None Rule (Css)
How to Ensure That Text Is Inside Rounded Div
How Does Object-Fit Work with Canvas Element
Two Divs, One Fixed Width, the Other, the Rest
How to Customize the HTML5 Input Range Type Looks Using CSS
Less and Bootstrap: How to Use a Span3 (Or Spanx [Any Number]) Class as a Mixin
How to Efficiently Load Google Fonts in Nuxt
Perspective and Translatez Moves Diagonally
CSS - First Child Without Certain Class
How to Have Different Colored Left and Top Borders in CSS with Straight Join
Mui - Outlined Select Label Is Not Rendering Properly
Css: on Hover Show and Hide Different Div's at the Same Time