Develop Reference

how to set the y-axis properly in solid gauge (highcharts)?

I got a problem in Solid Gauge. When i change the width of the browser, the inner element (pane) in solid gauge gets messy. Its getting cutoff. I made the width to 100% but still its not working.
Is there any way to adjust the width of the pane into 100% width? the jsfiddle link is provided in the comments. Please refer that

This is because pane size exceeds 100%. Set it to 100% and problem will not occur. Example: http://jsfiddle.net/jm8E4/162/
Using spacing you could make pane bigger - by decreasing spacing. Example: http://jsfiddle.net/jm8E4/163/
API: http://api.highcharts.com/highcharts#chart.spacing

Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?

Similar question, without a great answer:
How can I include the width of "overflow: auto;" scrollbars in a dynamically sized absolute div?
I have a <div> of fixed height that acts as a menu of buttons of uniform width. Users can add/remove buttons from the menu. When there are more buttons than can fit vertically in the <div>, I want it to become scrollable - so I'm using overflow-y:auto, which indeed adds a scrollbar when the content is too large in y. Unfortunately, when the scrollbar shows up it overlaps the menu buttons, and adds a horizontal scroll bar as a result - the big problem is it just looks horrible.
Is there a "right" way to fix this? I'd love to learn some style trick to make it work right (i.e. the scrollbar sits outside the div rather than inside, or the div automatically expands to accommodate the scroll bar when necessary). If javascript is necessary, that's fine - I'm already using jQuery - in that case, what are the right events are to detect the scrollbar being added/removed, and how do I make sure to use the correct width in a cross-browser/cross-style way?
JSFiddle: http://jsfiddle.net/vAsdJ/
HTML:
<button type="button" id="add">Add a button!</button>
<div id="menu">
</div>
CSS:
#menu{
background:grey;
height:150px;
overflow-y:auto;
float:left;
}
Script:
$('#add').button().click(function(){
var d = $('<div/>');
var b = $('<button type="button">Test</button>');
d.appendTo($('#menu'));
b.button().appendTo(d);
});

First: To remove the horizontal scrollbar set overflow-x: hidden; as Trent Stewart has already mentioned in another answer.
CSS Approach:
One thing I have done in the past is to add a wider wrapping div around the content div to make room for the scrollbar. This, however, only works if your container width is fixed... and may need to be adjusted (by serving different styles) in various browsers due to variable rendering of scrollbars.
Here a jsfiddle for your case. Note the new wrapper <div id="menu-wrap"> and its fixed width width: 95px;. In this case the wrapper div is doing the scrolling.
You could probably also solve this by giving the wrapper some padding on the right, and thereby avoid the fixed width problem.
jQuery Approach:
Another option is to detect the overflow using jquery as described here, and then increasing the width or padding of the div to make space. You may still have to make browser-specific adjustments though.
Here a jsfiddle with a simplified version for your example. This uses your click function to check the div height after every click, and then adds some padding to make room for the scrollbar; a basic comparison between innerHeight and scrollHeight:
if($('#menu').innerHeight() < $('#menu')[0].scrollHeight){
$('#menu').css( "padding", "0 15px 0 0" );
}
To make this more cross-browser friendly you could check for the scrollbar width (as outlined here) and then add the returned value instead of the fixed padding. Here another jsfiddle to demonstrate.
There are probably many other methods, but this is how I would go about it.

Have you tried simply using overflow-x: visible; or hidden

If I set min-height and max-height, which one has priority?

I have a menu, with 9 items. I want the button height to have 40px OR 11%(1/9 of the screen) of the screen size. Whathever is the largest.
Right now i have:
min-height:40px;
max-height:11%;
And it's always 40px. Even when my screensize is larger than that.
Can I achieve that on css or I have to use javascript?
Thank you.
EDIT
JSFiddle for it.
#Jeffery Khan is right, that solves it. I had a different element pushing it up. Thank you!

min-height is generally the height of whatever something is set to unless something causes it to expand passed that, such as the contents of a div.
Try the following:
min-height:40px;
height:11%;

You don't need javascript now that we have min(), max() and clamp().
While these weren't around in 2012 they've been well supported for several years now.
Based on your original question:
I want height of 40px or 11%, whichever is greatest:
First of all it's usually better to use vw or vh if you want to refer to a proportional size of the screen, since 11% will just be 11% of the containing element and can be unpredictable.
So with min / max you can try this:
height: max(40px, 11vw);
To get more advanced (and frankly easier to read) you can use clamp:
height: clamp(100px, 50vh, 900px);
This will 'prefer' to be a height of half the viewport with a minimum of 100px and a maximum of 900px (for really tall screens). So you get really nice fluid motion when you resize the screen with no coding.
Of course these can be used with min-height or max-height too if that is more appropriate for your needs.
Wow I'm amazed nobody added this in over ten years!

CSS: Two column Div layout misaligns when Zoom changes

Please see the jsFiddle http://jsfiddle.net/Lijo/ryDnn/1/ . I have two columns layout. It is % based layout – but there is minimum width defined. When I make the zoom (of browser IE8) as 75 % or below, it works well. When I make the zoom as 85%, the orange box goes down. How can we overcome this misalignment? The Orange Box should remain in the correct postion (as shown in the image) irrepective of the zoom/browser minimize/desktop resolution. It should not go down.
Result window in jsFiddle: http://jsfiddle.net/Lijo/ryDnn/1/embedded/result/
Also, it would be great if you can explain the CSS theory behind it.
Note: Such misalignment is observed even when the browser is minimized.
Note: My desktop was configured in 1024 by 768 when this is tested.
Even after removing the margins from leftNavContainer and main container, the issue is there. Please see http://jsfiddle.net/Lijo/ryDnn/10/

To allow for rounding errors, take of a percent. 15% for left and 84% should work.
However, the problem is that you are adding in margins too, that obviously won't work well.
Consider to first get two divs to use 15% and 84% (or 85% if it works), and then use those two divs as wrappers in which you put a div which you give the right margins. That way, your margins aren't interfering with the width calculations.
In other words, margins aren't part of the div's width.
When in doubt, use a Page/Web Inspector extensively to get an idea of the boxing models...

your total width is 100% leftNavContainer taken width is 25% because margin-left-10px and width-15% ,mainContainer is also same
if you are giving margin means reduce your width related to margin size
mainContainer css
#mainContainer {
width:75%; //(or) reduce your margin
}
or
#leftNavContainer {
width:15%; //(or) reduce your margin
margin:5px;
}

JQuery Progress Bar plugin - 100% width

Again I have a question regarding this plugin: http://t.wits.sg/2008/06/20/jquery-progress-bar-11/
What I want to achieve is to set the progressbar's width to 100% so it is as wide as a container it is in.
What I have done so far, I have changed this line in the plugin:
$bar.css("width",config.width+"px");
To this:
$bar.css("width",config.width+"%");
And then I set width to 100 when I initialize the plugin. That would work, the progress bar is 100% wide, there is just one problem, the image that is supposed to fill the progressbar (progress bar background) stays the same width which is less than the bar width and repeats itself which looks very bad.
I hope that this makes sense to somebody.
If anybody has any exprience with the Progress Bar plugin please help me.

I think this is a style problem, and you probably have repeat-x on the image background style that's why it's repeating, probably you will need to make a larger image or set a different kind of background like just color.
I think your css should look something like this:
bar{
background-image:url('mybackground.gif');
background-repeat:repeat-x; //or just background-repeat:repeat
}
so you might need to remove the following line, that will prevent the image to be duplicated accross as your element grows.
background-repeat:repeat-x;
or change it for:
background-repeat:no-repeat;
So if you want to user other than that image it could probably be something like:
bar{
background-color:#EEEFFF;
}
Hope this helps you.