Is there a "clearfix" for vertical-align? - css

Question

Is there a similar technique like float and clearfix but for vertical alignment.
I want to separate different elements (either inline or floating left) such that they are always aligned either to the top or bottom.
In this jsFiddle I want the red and the green to be horizontally aligned. I cannot change the CSS or the existing divs. I can only wrap .s1 and .s2

Answer 1

Ok.. If you know the class name you can do like this:
SEE DEMO 1
Here the css:
.s1 {
display: inline-block;
font-size: 10px;
height: 20px;
}
.s2 {
display: inline-block;
background: green;
font-size: 20px;
height: 20px;
}
.s3 {
background: red;
height: 20px;
}
/* PUT THIS IN AN EXTRA FILE OR UNDER THE ABOVE STYLE */
.s1 {
vertical-align: bottom;
}
.s2 {
vertical-align: middle;
}
Or if you can wrap the file you can float the div's like this:
SEE DEMO 2
HTML
<div class="wrap_1"> <!-- Wrap 1 -->
<div class="s1">
<div class="s3">asdf</div>
</div>
</div>
<div class="wrap_2"> <!-- Wrap 2 -->
<div class="s2">
<div>qwer</div>
</div>
</div>
CSS
.s1 {
display: inline-block;
font-size: 10px;
height: 20px;
}
.s2 {
display: inline-block;
background: green;
font-size: 20px;
height: 20px;
}
.s3 {
background: red;
height: 20px;
}
/* FLOAT THE DIV */
.wrap_1 div, .wrap_2 div {
float: left;
}
Let me know if solved your issue!