Question

The question may sound a bit… stupid. But I’m kinda stuck.

I’m using Twitter Bootstrap. My test code is :

<div class="container-fluid">
    <div class="row-fluid">
            <div class="span3" style="background:#eee; border:1px solid blue;">

            <ul class="nav nav-list">
            <!-- List contents -->
            </ul>

            </div><!--/span-->
            <div class="span9" style='background:#fff; padding-left:10px; border:1px solid red'>
                <div class="hero-unit">
                        <h1>Hello, world!</h1>
                        <p>This is a template for a simple marketing or informational website...</p>
                        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
                </div>
                <div class="row-fluid">
                    <!-- The content -->

                </div><!--/row-->
        </div>
    </div>
</div>

And this is what it looks like (I’m using colored borders to show you WHERE each of the 2 divs is) :

Now, my question is :

Is there any way I could have the second, red-bordered, div (span9) occupy THE WHOLE rightmost column (without any margins around it), so that the final result looks like :

• the Control Panel on the left (a whole column with with that gray-ish background)
• the right-most div on the right (occupying all of the remaining space, with a white background)

Answer 1

I don’t have much experience with twitter bootstrap, but I’m assuming that the answer would be to look at the css properties for your ‘row-fluid’ class and check the margin and width.

margin: 0 auto; will give remove any margin (space around the outside of the div) and center it in the container

if ^ is already true, width=50%; (if you’re going to have both side by side)

Hope that helps!