Home/ Questions/Q 9004963
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T01:01:24+00:00

I want to create a layout in bootstrap with a sidebar and main content.

  • 0

I want to create a layout in bootstrap with a sidebar and main content. I am using the following html at the moment (also in this jsFiddle):

<!DOCTYPE html>
<html>
<head>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css">
    #sidebar {
        background-color: lightgreen;
    }
    #footer {
        background-color: lightblue;
    }
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <div id="sidebar">
                <ul>
                    <li><a href="http://www....">Home</a></li>
                    <li><a href="http://www..../faq">Questions</a></li>
                    <li><a href="http://www..../news">News</a></li>
                    <li><a href="http://www..../contact">Contact</a></li>
                </ul>
            </div>

        </div>
        <div class="span8" id="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean in purus purus.
                Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis.
                Aliquam dapibus orci ac sem viverra semper cursus ante varius.
                Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque.
                Etiam suscipit accumsan tincidunt.
                Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Aenean in purus purus.
                Ut risus lorem, pharetra nec iaculis sit amet, blandit nec turpis.
                Aliquam dapibus orci ac sem viverra semper cursus ante varius.
                Vestibulum iaculis eleifend magna, sit amet blandit nibh dignissim pellentesque.
                Etiam suscipit accumsan tincidunt.
                Sed auctor, orci at pretium commodo, enim dui fermentum nulla, id blandit enim lacus non mi.
                Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
            </p>

        </div>
    </div>
    <div class="row">
        <div class="span12" id="footer">
            Footer
        </div>
    </div>
</div>
</body>
</html>​

What I want is this:

Desired Result

What I get however is this:

Actual result

What can I do to get the sidebar div to go all the way down? Ideally without making changes to the html (only css changes), however if that isn’t possible I’ll take anything.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can achieve this by using a “filler” element.

    Create two CSS classes, one called .filler (the parent) and another class with a pseudo-element called .fill::before:

    .filler{
    position: relative;   
}

.fill::before{
    content: "";
    position: absolute;
    top:0;
    left: 0;
    width: inherit;
    margin: inherit;
    bottom: 0;
    background-color: lightgreen;
    z-index: -1;
}

    You can then add the filler class to the row element and the fill class to the span4 element:

    <div class="container">
    <div class="row filler">
        <div class="span4 fill">
            <div id="sidebar">
                <ul>
                    <li><a href="http://www....">Home</a></li>
                    <li><a href="http://www..../faq">Questions</a></li>
                    <li><a href="http://www..../news">News</a></li>
                    <li><a href="http://www..../contact">Contact</a></li>
                </ul>
            </div>
        </div>
    ....
</div>
    • 0