Size of div (.well) - Twitter Bootstrap

Question

I'm building a website with Twitter Bootstrap, fluid layout. I have my content on the left and a little menu on the right, I want the menu to be in a well.

<div class="row-fluid">
    <div class="span9">...</div>
    <div class="span3">
        <div class="well" style="height: 100%;">
            <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i>   Een project toevoegen</a>
            <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i>   Alle projecten bekijken</a>
            <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i>   Deze lijst afdrukken</a>
        </div>
    </div>
</div>

The problem is that the well doesn't have enough heigth to contain all the links in the menu. I don't want to set the height manually because the menu is generated by PHP and I don't want it to be larger than necessairy.

<div class="row-fluid">
    <div class="span9">...</div>
    <div class="span3 well">
        <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i>   Een project toevoegen</a>
        <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i>   Alle projecten bekijken</a>
        <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i>   Deze lijst afdrukken</a>
    </div>
</div>

This makes the well big enough to contain all the links, but it makes the span3 div too large, it doesn't fit next to the span9 div anymore.

Any solutions to this problem?

Is [this problem](http://stackoverflow.com/questions/1122381/how-to-force-child-div-to-100-of-parents-div-without-specifying-parents-heigh) the same you have? — Edu, Apr 17 '12 at 12:14

score 3 · Accepted Answer · answered Apr 17 '12 at 12:20

Your .well is not properly wrapping because the buttons are being floated. Just define them as float:none in your stylesheet (not the bootstrap.css stylesheet) and it should work.

HTML

<div class="row-fluid">
    <div class="span9">...</div>
    <div class="span3">
        <div class="well menu">
            <a href="/project/add" class="btn btn-small span2" style="text-align: left;"><i class="icon-plus"></i>   Een project toevoegen</a>
            <a href="/project/allindex" class="btn btn-small span2" style="text-align: left;"><i class="icon-list"></i>   Alle projecten bekijken</a>
            <a href="#" class="btn btn-small span2" style="text-align: left;"><i class="icon-print"></i>   Deze lijst afdrukken</a>
        </div>
    </div>
</div>

CSS

.menu .btn {
   float:none;
}

Note: I defined a .menu class to target your .well section, that way any css you modify from the bootstrap will only apply to that section and not the rest of your document.

Size of div (.well) - Twitter Bootstrap

1 Answers1