How can I make a float top with CSS?

html css css-float
mck89 picture mck89 · Dec 4, 2009 · Viewed 179.2k times · Source

I know that CSS only supports left and right values for the float property, but is there a technique to implement a floating top? I will try to explain. I have the following code:

<div style="float:left">
<div style="float:left">
<div style="float:left">
....

With this code every div is floated to left until the right limit of the page is reached. I want to do the same thing but vertically, so that every div is placed at the bottom of the previous one and then, when the bottom limit of the page is reached, a new column is created. Is there a way to do this using only CSS (and maybe editing the HTML code)?

Answer

Abhishek Goel picture Abhishek Goel · Jul 11, 2014

Simply use vertical-align:

.className {
    display: inline-block;
    vertical-align: top;
}

Related questions

How to align 3 divs (left/center/right) inside another div?

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]] Container div is 100% wide (no set width), and center div should remain in center after resizing the container. So I set: #container{width:100%;} #left{…

Read More
How to align two elements on the same line without changing HTML

I have two elements on the same line floated left and floated right. <style type="text/css"> #element1 {float:left;} #element2 {float:right;} </style> <div id="element1"> element 1 markup </div> <div …

Read More
Split Div Into 2 Columns Using CSS

I have been attempting to split a div into two columns using CSS, but I have not managed to get it working yet. My basic structure is as follows: <div id="content"> <div id="left"> <…

Read More