Question

I have my page structured into 3 different modules: navigation on the left, images in the center, and social sidebar right. Below is the css that formats this content. I’m having trouble when I resize the window; the images in the center overlap with the navigation on the left and the sidebar gets pushed to the bottom of the page and overlaps with the end of the left navigation. The navigation module/sidebar is fixed.

I’m using twitter bootstrap as a base.

Any ideas on what’s causing this and how to fix this?

css

div.sidebar{
    width: 120px;
    position:fixed; 
    top:12%; 
    left:2%;
    overflow-y:auto;
    height:100%;
}

html

 <div class ="container-fluid">
<div class = "row-fluid">
<!-- left navigation div -->
    <div class = "span1" style = "width:120px;">
            <div class = "sidebar" >
            #navigation
            </div>
        </div>
        
<!-- middle images div -->
        <div class = "span8" style = "width: 900px;">
            #lot of images
        </div>

 <!-- social sidebar -->
        <div class = "span2" style = "margin-left: 10px; ">
            #social module with images
        </div>
</div>
</div>

when I make the window smaller

normal

Answer 1

Couple issues I see…

1. You are completely defeating the purpose of “.row-fluid” and the framework by adding widths?? Remove all width assignments to the grid elements (ie. .container, .row, .span(x)) and let the framework do what it was designed to do…create the width for you. If you need to adjust width from what is being generated, add it to block level element INSIDE of the .span(x).

2. Your span HAVE to add up to NO MORE than 12. You have 14 which will absolutely make the last wrap around.