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;
}
Related
I have some trouble making my design work. I looked around the web a lot, but I can't find what I'm looking for.
I'm trying to make something like that: concept design
The thing is that I started by doing that with CSS only, but it's not the good solution, because if my picture has a different ratio or another reason, it will not work at all.
What I'm trying to achieve is that inside a div, I have one big image and in the other div (floating left or right), I want two small images, one over the other, taking the same height as the big one. All this (the two divs) should take 100% width of the body, but I don't really know how to achieve that. I'm not sure to understand how to make height responsive with the width...
I also have some weird margin between my images... Can you help me delete them as well?
So my code is via this link: http://codepen.io/anon/pen/MygaEB
Someone (Giovanni Perillo) suggested me to have this Javascript code:
var div1 = document.getElementById("colonne-gauche");
var div2 = document.getElementById("colonne-droite");
var height1 = div1.offsetHeight;
var height2 = div2.offsetHeight;
if (height1 > height2) {
div2.style.height = height1;
}
else {
div1.style.height = height2;
}
The thing is that it's not working at all. I'm sure it's a code I could use, but I'm not sure how to make it work in my code.
EDIT : I tried to look what I was able to do with Flexbox, but it doesn't seem to work. Flexbox allow two box to be side by side, with the same height, but it need to be the same width as well. What I want is something more responsive like the big image is taking 3/4 width and the two images (in the same div) are taking 1/4 width, but they have the same height in total as the big image. I'm sure it's totally possible to do that like all masonry layout, but me it's not really a masonry, but something that stay the same : One big image and two little, but responsive depending of image size.
EDIT 2 : The code needed should allow to change the width of each divs to make sure that they have the same height (without changing image aspect ratio). It should work with different images aspect ratio as well. The example bellow show a div with three images, but that's just to say that div should change width dynamically to have the same height.
Javascript is not necessary. You can accomplish this with just CSS. To make side by side divs equal in height you need to make html and body have a height of 100% then you have to specify a height for your container div (this can be a percentage or a specified length). In this case I used a height of 500px for the .section class. Then for the inner containers you need to specify a height of 100%. Then each image within that container needs a specified height, for one image use 100%, for two use 50%, etc. I also removed your inline styles. I also removed the section tag.
Here is the updated codepen.
Update:
To preserve aspect ratio change the height of the img tags to auto. Also, change the height of the .section class to auto. I also change the width of .colonne-gauche back to 65% and the width of .colonne-droite back to 35%.
divs are block elements. you can set display:inline-block; to make them align side by side.
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.
My window object has a width of 1361px.
A container div has its width set to 90%, that theorically makes 1224.9px.
However, the computed size of it ( $("#mycontainer").width() ) returns 1225px. FYI, the computed number seems to come from the browser itself, not jQuery.
Now, the problem is that if I put two floating divs in it, respectively 1000px and 225px, they will NOT fit on the same line, allegedly because 1225px > 1224.9px. At least in FF and Chrome, not tested elsewhere.
If I set the container a fixed size of 1225px, then the two divs will be back on the same line, which confirms in my mind that the browser does not use the superior-rounded computed size to know how much space is actually available for children to occupy.
I wanted to know if anybody knew how to solve this. I am not even sure how to get the percentage size of the container to do the maths myself like this :
var width = Math.floor($(window).width * $("#mycontainer").percentageWidth() / 100)
CSS display: flex; is a good way to fix these quirks nowadays.
I'm trying to create a responsive site (resize the browser window to see the changes), but I'm unable to center these checkered divs.
http://arunmahendrakar.com/ktw/play.html
The divs are dynamically created and appended to one of the four 'container' divs (#topLeft, #topRight, #bottomLeft and #bottomRight).
I have tried using margin-left:auto; and margin-right:auto on various elements, but that did not help.
Please help me horizontally center the #topLeft, #topRight, #bottomLeft and #bottomRight divs. I prefer a pure CSS solution, but if it is not do-able, I'm ok with a js tweak as well.
There are a whole bunch of different way to do this with some tweaking to the way you build that structure. Here's what I'd do:
First, size things a bit more normally; make the quadrants (#topLeft for example) width: 100% and the individual square sizes padding: 5%. This will give the squares the same size as they have currently, but the 100% width ensures that things are actually centered where you want them to be. At 200% the "center" of a quadrant will be off by 50%.
Next, instead of using float and clear, use display: inline-block on the squares. This will have them all running together on a line; your Javascript can manually break them up by inserting a <br> after every 5 squares. You'll no longer need to add the clearBoth class once you've done this.
At this point, you should have almost exactly what you want. There will, however, be some extra spacing between each row of squares. This is due to whitespace in the HTML, and to get rid of it, just set make sure the quadrants (again, #topLeft for example) have font-size: 0 set.
That ought to do it!
Explanation
It's really pretty simple: display: inline-block obeys text align. By creating your checkerboards out of inline-block elements instead of floats, you can control which side they align to by just changing out text-align.
All the other stuff is just some necessary cleanup work to make this technique work nicely.
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!