How to properly display content when I resize the window?


Tags: html,css,twitter-bootstrap,resize

Problem :

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

enter image description here

normal

enter image description here



Solution :

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.


    CSS Howto..

    How to add animated gif to an image sprite?

    How do I minify CSS and Javascript? [duplicate]

    How can I use :hover with multiple classes

    How to prevent Twitter Bootstrap changing margins as width of page is extended

    CSS - How to center a DIV menu

    How do I allow CSS files to be referenced from other domains?

    How can I change the content of