I am having trouble when i zoom out my page in browser.
this is a simple page, body has a width of 970px, and devided into 2 parts, left and right. Left one is 300px and float to left with margin-right 10px, right one is 660px, and float right. This is ok when i zoom in or zoom out.
but when i change left width to 298px, and add right width to 658px, add 1px border to both parts, though it is ok in normal size, but when i zoom out(ctrl+ mouse wheel down) to 90%, the right part drop down and breaks the layout. You can see here for detail:jsfiddle
<body>
<style>
</style>
<div id='left'>left</div>
<div id='right'>right</div>
</body>
To give your layout some flexibility, use percentage widths for your divs and float left and right as suggested in previous answers, but do not set a margin. Allow the margin to be the space left over. Using exact widths or percentage values that add up exactly 100% there is a risk the layout will break in one or more browser for reasons explained by Shomz.
#left{
float:left;
width:30%;
}
#right{
float:right;
width:65%;
The space between the two elements will be a the same as a 5% margin, and less likely to break.
HTML doesn't like to work with decimal pixel numbers and that's exactly what happens when you zoom - all the pixel sizes get internally divided or multiplied (though multiplication isn't really a problem).
Think about it, how should it represent 268.2 pixels? It gets rounded. So if you have many of those not-divisible elements, you're bound to lose some pixels and that causes the layout to break. Also, that's why some zoom percentages work better than the others.
Related
I tried looking up an answer to my issue and found this css - margin top causes unwanted body scroll bar but it doesn't seem to fix my issue.
Here is my code to center
if(W > H)
{
scale = (height-45) / H;
}
else if(H > W)
{
scale = (width-5) / W;
}
var left = (width*0.5)-(0.5*W*scale);
var top = ((height+40)*0.5)-(0.5*H*scale);
$("#plan").css({"position":"absolute", "left": left,"top": top});
Basically I am centering my div's center in the center of the screen, and I am having 2 issues.
I have it set so that there is a scale for my div, that is based on the smaller of height or width, and in the example I have a 1285x910 div. My height will be maxed out, but I still get scrollbars. The horizontal is also there.
Using the same example as above there is a horiz scrollbar, that if I scroll over, will bring me over to the left a random amount, for each of my plants it's different. 1 brought it over to make the plan 0,0, the next made it so that it made the plan's center be at 0,0.
When I switched from position"relative" to "absolute" it changed one plan to only scroll a little bit, but it's still there.
So basically (in this example) I am looking to stop the verticle scrollbar for appearing since there is nothing to scroll, and by the scrollbars being there it takes up too much room and it's not full screen anymore.
As well as stop the horizontal scrollbar from appearing when my plan is centered and not big enough to scroll. If my plan is big enough and needs to scroll left or right, that should be allowed and enabled.
The answer in the above link is
"One simple solution, margin:0; and padding:0; on the body.
The reason of this, is to reset all the defauls set on the margins and paddings.
html, body {height:100%; margin:0; padding:0;}
"
Which seems to be what I want to do for at least #1, but if it works for #2, that would be great (i.e., I want my div to be centered but it to be as if nothing was moved so it doesn't throw off the scrollbars, unless it got big enough to do so, or it was big enough to do so based on it's size).
Fiddle: http://jsfiddle.net/Lh3ze3m6/18/
Any comments or questions please let me know,
Thanks all!
To disable both horizontal and vertical scrollbars apply this to your css stylesheet:
body {
overflow: hidden;
}
For instance, I have 10 left-float divs which take 20% of the container width with an aspect ratio of 1:1 (made using jQuery):
width: 20%;
float: left;
http://i1214.photobucket.com/albums/cc494/Golitan11/example1_zps7a24eb88.png
Now, when I click one of them, they take 40% of the container width (without losing the aspect ratio of 1:1) and the image is changed to a Soundcloud iFrame. In this example, I clicked the second one:
http://i1214.photobucket.com/albums/cc494/Golitan11/example2_zps9b7a9f48.png
The problem is, as you can see, the floating. In fact, I would like to fill the hole on the left. I tried using a table instead of divs, but in this situation, it makes it too hard to move the s to other (even with jQuery) when the clicked is getting colspan/rowspan. Any idea?
Thanks!
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!
Let me explain this question. I'm working on a responsive website that need the image to be scaled depending on the window's width. Do I have all set those image with this style
.bgImg{width:100%; height:auto; display:block; position:relative;}
and I have make a 3 column group like this
the thing is when the height of the window becomes odd, both 25% column have now a margin of 1px at the bottom
You'll need to zoom in the image above since it's only 1px.
I was wondering if there's a way to fix this or any javascript that could force the image height to round up to the nearest even number so all my image's height will be even and will fix that problem.
Added a fiddle http://jsfiddle.net/2QneE/3/
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;
}