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

    How to change font-awesome icon color when it is active

    How to test a webpage for different aspect ratios

    Polymer 1.x: How to use Polyfills to shim support for CSS variables

    How to quickly find a CSS class when there are multiple stylesheets

    How to hide and show a separate div with CSS

    how to make the text in a div to not overflow its width

    How can I fill a fixed-size
    with a variable-size

    ?

    How to fix responsive drop down menu using css?

    How do I animate a div with css3 to move and spin?

    how to use !important in jQuery animate() function

    How to load CSS in Django templates?

    How to change image css after rotating it in JS?

    How to make the height of the div take all the space?

    HTML CSS: How to align grid to content area?

    css, how to stop an element being squashed by container

    How to call a jquery funcion with a css button?

    How can I use CSS pseudo-classes with GWT's UiBinder?

    CSS, how to put a div inside a div that is responsive?

    How to calculate total size of all css,js and html pages separately uing shell script?

    How can I modify a CSS class using JavaScript?

    How to get a list of valid values for a CSS property with javascript?

    how to build a mobile site - basics, is it all CSS?

    How to define a good convention for css?

    Menu CSS showing current page in a single html file

    How to prevent automatic onmouseover after onfocus?

    Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

    how to read value of style[“display”] property of webcontrol

    CSS-3 - How can I place a white space holder above two columns?

    How to load CSS using jquery

    How to GPU accelerate CSS transform?