How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?


Tags: html,css

Problem :

I have #maindiv and i am putting divs in that programmatically. So i never know how much inner div will be inside #maindiv. every inner div has width: 160px. I used this css for #maindiv:

 #maindiv
 {
   overflow: auto;
   width: 640px; 
   height: 65px;
   background:lightblue;
 } 

I want #maindiv to make horizontal scroller when total of innerdivs width is more than 160px. My css is not giving me right results. I am not getting any horizontal scroller even i fixed the width of the div. If i have innerdivs with more width that #maindiv then they make #maindiv wider. I even used max-width:160px for #maindiv as well. any Idea? Thanks in advance.



Solution :

You could try using

overflow-y: scroll;

See http://jsfiddle.net/4CCfy/


    CSS Howto..

    css how to align a graphic on page

    How to display clicked on/off SVG icon from admin panel page and display result on a different page

    How to toggle visibility of 2 divs after clicking a mailto link?

    How to match element containing another element?

    How do I create a border for an image?

    How should I crop the image at client side using jcrop and upload it?

    DOM How to add two divs (with jQuery inside them) next to each other?

    How to assign a class or ID to a table within a JavaScript function?

    how to set up responsive columns with pure CSS?

    How to keep div height fixed during changing its content?

    How to fix the css padding

    How to make one list-item in menu higher than the others with CSS?

    How to avoid overlapping HTML tags to highlight text

    CSS: How to flow text around both left and right images

    How to edit the CSS of a div that does not contain a H1 tag?

    How to find all elements with a particular CSS style, without a JS library?

    How do I size an image to fit inside another image? [closed]

    How to make css opacity property not to be inherited from parent div´s?

    how to fit the background image to the containing anchor element?

    How to have proper spacing between items in the navbar regardless of word size?

    How to enable overflow scrolling within a Semantic Ui Grid?

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    How to vertically align text inside
  • in a CSS based drop-down menu?
  • How to prevent inherit for H1?

    How to keep the footer docked at the bottom of the page considering following structure? [duplicate]

    How to do a resizable link a:hover in CSS

    How to morph multi-part css properties with Mootools Fx?

    In LESS, how to rewrite this CSS composition style?

    how to use {{$variable}} in css , Laravel 5.1 [closed]

    How to push a div from the top in percentage with css?