CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresize
sharataka
sharataka

Reputation: 5132

How to properly display content when I resize the window?

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

Upvotes: 0

Views: 3935

Answers (4)

User_3535
User_3535

Reputation: 862

Suggestions :

1.Remove all the extra things you put for style let bootstrap do the things !!

2.always test your div with "well"

Put your codes like this

<div class="container">
 <div class="row" style="margin-top:20px;">
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
  <div class="col-lg-3 col-sm-12 ">
    <div class="well"></div>
  </div>
</div>

col-lg-* for large device col-xs-* for extra small device col-sm-* for small device

use it like this you can achieve what you want

Plunker demo

resize your browser to view the effect

Upvotes: 0

Joe Conlin
Joe Conlin

Reputation: 5994

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.

Upvotes: 1

Scott Simpson
Scott Simpson

Reputation: 3850

Overriding the spans with inline widths will cause odd behavior. Can you use the default TBS scaffolding instead?

Upvotes: 0

joshuahornby10
joshuahornby10

Reputation: 4292

Have you thought about responsive web design?

You say your using twitter bootstrap? Have a look at this:

http://twitter.github.com/bootstrap/scaffolding.html#responsive

Add this to the head 

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

Change the HTML:

<div class="container-fluid">
 <div class="row-fluid">
   <!-- left navigation div -->
     <div class="span4">
        <div class = "sidebar" >
         #navigation
        </div>
    </div>

    <!-- middle images div -->
     <div class="span6">
        #lot of images
    </div>

     <!-- social sidebar -->
     <div class="span4">
        #social module with images
    </div>
</div>

NOT TESTED. Im also not 100% how big the fluid container is, i think its 12, if its 16 you will have to change the spans so they add up to 16

Upvotes: 2

Related Questions