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


Tags: html,css,css3,layout,flexbox

Problem :

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



Solution :

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


    CSS Howto..

    Responsive website - how to debug a non-responding responsive css?

    How to move image slowly with animation when appending the image to tag

    How to make HTML pages print at a consistent size from Chrome?

    How to remove CSS triangles?

    How to make a div with a circular shape? [duplicate]

    How to display text on the same line?

    How to apply css class to uploaded image? [closed]

    CSS: How to position elements in ng-for loop using position : “fixed”

    Intellij IDEA 11: how can I compile .css from .less?

    How can I prevent my li's from going below my menu even if there is no room?

    How do i set the relative path and folder paths in HTML and CSS from VS 2012?

    How to create vertically centered meeting borders on a div?

    How to prevent conflicts between css rules

    how are large quantities of css templates produced?

    How to show div property that is in a class with javascript

    Javascript how to use external Css sheet

    How to display html with css stylesheet in TextView?

    style sheet -moz-linear-gradient no show in web mobile browser?

    how do I select second submit button to imply other color

    How to do Hanging Punctuation in HTML / CSS

    How to line up images in a horizontal row with CSS?

    How can I get the images in my carousel to center?

    CSS how to make a perfectly alligned left (or right) border?

    Dropdown Menu will move all
    Below. How to prevent it?

    How to put image tiles properly without colum gap or row gap in between using only CSS?

    How to fade, animate and change text, word in title / sentence

    How to change the indentation of all the lines except the first line in bulleted or non bulleted list?

    How can I change the background-color using ng-class?

    How can i override the margin: 0; padding: 0; border: 0; css styles from main body css for ul li

    How to remove class using CSS