html/css, how to push an element on to the next line?


Tags: html,css

Problem :

I've written this small fiddle showing what I want, but what I would like to know is, is there away to style the .stack-slot elements so that they; (a) shrink to the size of their content and (b) stack vertically beneath one another as shown, using a css rule instead of <br/> tags?

html:

<span class='stack-panel vertical'>
    <span class='stack-slot'>
        <span class='content'>1</span>
    </span>
    <br/>
    <span class='stack-slot'>
        <span class='content'>2</span>
    </span>
    <br/>
    <span class='stack-slot'>
        <span class='content'>3</span>
    </span>
</span>

css:

.stack-panel.vertical .stack-slot
{
    /*TODO replace effect of <br/> tag*/
}


Solution :

Do this:

.stack-panel.vertical .stack-slot {
    clear:left;
    float:left;
}

jsFiddle example

No <br> tags, they stack vertically, and shrink to fit their content.


    CSS Howto..

    CSS Shadows (how to get rid of top shadow?)

    How to make input placeholder text not opaque when the text field background is opaque

    how to call browser based css?

    how to set zoom level using css

    How to rotate image when scrolling using CSS transform?

    How do I keep my HTML elements on the same horizontal plane inside a parent DIV?

    How to make this page less cluttered with css and html [closed]

    How can I convert an svg-glyph into a path?

    Slideshow image with buttons

    How can I center text on an image using Bootstrap?

    CSS Less changes not showing. Compile or IIS error?

    How to add spacing between checkboxlist items?

    CSS - how to code for a specific resolution

    How to add a hover transition effect on the navigation?

    How to make a div next to each other in CSS

    How can I make jQuery's draggable function expand the container?

    How can I show entered password using tooltip on input type=password in bootstrap?

    html - how to make images stay on certain part of background

    How can I use .htaccess to send distant expiry headers on CSS and JS files?

    How to create a completely flexible piano keyboard with HTML and CSS

    how to create horizontal drop-down menu with javascript for asp.net website?

    How to select 1st Column of div Table?

    How to animate the movement of inline-block items on page resize (ideally using css)?

    How to create an div background that is not affected by page zoom with CSS

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    CSS How to fix element position after some scroll without using jquery

    CSS: how can I hide a div when its text doesn't fit?

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How to target html area maps with css

    How do I make this sticky footer stick to the bottom of the layout when the sidebar exceeds screenheight?