Search code examples
htmlcsscss-floatgraceful-degradation

CSS Float Degradation Right to Bottom

I am trying to float an element on my page as a right sidebar, but to enable degradation to put the element below the content and above the footer for smaller screen sizes. Here is what I have so far: JSFiddle

<html>
<head>
<style type="text/css">
.footer{
    clear:both;
    width:100%;
    height:20px;
}

.sidebar{
    //float:bottom;
}

@media (min-width : 400px){
    .sidebar {
        //float:right;
        //width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}@media (min-width : 500px){
    .sidebar {
        float:right;
        width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}
</style> 
</head>
<body>
    <div class='sidebar'>
        <p>SIDEBAR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec arcu sed ipsum placerat ornare id ut augue. Aliquam erat volutpat. Morbi laoreet tellus purus, vitae feugiat elit accumsan tincidunt. Pellentesque magna metus, pharetra ut mollis vel, dictum in purus. Mauris bibendum euismod lorem, luctus gravida turpis.</p>
    </div>
    <div class='content'>
        <div class='grid'>
            <h2>Section 1</h2>
            <div class='element'>
                <p>Box 1</p>
            </div>
            <div class='element'>
                <p>Box 2</p>
            </div>
            <div class='element'>
                <p>Box 3</p>
            </div>
            <div class='element'>
                <p>Box 4</p>
            </div>
            <div class='element'>
                <p>Box 5</p>
            </div>
        </div>
        <div class='grid'>
            <h2>Section 2</h2>
            <div class='element'>
                <p>Box 6</p>
            </div>
            <div class='element'>
                <p>Box 7</p>
            </div>
            <div class='element'>
                <p>Box 7</p>
            </div>
            <div class='element'>
                <p>Box 9</p>
            </div>
        </div>
    </div>
    <div class='footer'>
        <p>FOOTER: Lorem ipsum dolor sit amet.</p>
    </div>
</body>
</html>

My Problem is that when the screen is less than 500px the sidebar goes to the top instead of the bottom. I can't seem to figure out how to make it "float" to the bottom. underneath the content I tried float:bottom but obviously that did not work. Any ideas or suggestions?

Solution

  • You have to change the order of your sidebar and content (the content is more important to begin with). See fiddle

    HTML:

    <div class='content'>
    <div class='grid'>
        <h2>Section 1</h2>
        <div class='element'>
            <p>Box 1</p>
        </div>
        <div class='element'>
            <p>Box 2</p>
        </div>
        <div class='element'>
            <p>Box 3</p>
        </div>
        <div class='element'>
            <p>Box 4</p>
        </div>
        <div class='element'>
            <p>Box 5</p>
        </div>
    </div>
    <div class='grid'>
        <h2>Section 2</h2>
        <div class='element'>
            <p>Box 6</p>
        </div>
        <div class='element'>
            <p>Box 7</p>
        </div>
        <div class='element'>
            <p>Box 7</p>
        </div>
        <div class='element'>
            <p>Box 9</p>
        </div>
    </div>
</div>

<div class='sidebar'>
    <p>SIDEBAR: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec arcu sed ipsum placerat ornare id ut augue. Aliquam erat volutpat. Morbi laoreet tellus purus, vitae feugiat elit accumsan tincidunt. Pellentesque magna metus, pharetra ut mollis vel, dictum in purus. Mauris bibendum euismod lorem, luctus gravida turpis.</p>
</div>
<div class='footer'>
    <p>FOOTER: Lorem ipsum dolor sit amet.</p>
</div>

    CSS

    .footer{
    clear:both;
    width:100%;
    height:20px;
}

.sidebar{
    float: right;
}

.content {
    float: left;
}

@media (min-width : 400px){
    .sidebar {
        //float:right;
        //width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}

@media (min-width : 500px){
    .sidebar {
        float:right;
        width:20%
    }

    .grid {
        float:left;
        width:80%
    }

    .element {
        float:left;
        height:50px;
        width:33%;
    }
}