How do I make a line break between divs inside a box?

Question

Here an example:

<div id=main>
<div>One</div><br>
<div>Two</div>
</div>

and css:

#main{
display:-webkit-box;
-webkit-box-direction: reverse;

When I run the code, the two div's go side by side, even though there are line breaks. How do I get the line breaks to work?????

Answer 1

That br does not really make a difference there. What you need is not a line-break.

You have to specify -webkit-box-orient: vertical;. It's default value is horizontal, that is why you see this result.

Warning

Actually you are using an outdated feature, which was later replaced by flex.

You should not use display: box.

flex is currently a W3C Candidate Recommendation, and is stable, so you should use that one instead. Every current browser has support for it.

Using flex you could do this:

#main{
    display: flex;
    flex-direction: column-reverse;
}

jsFiddle