Open this page : http://jsfiddle.net/dwDZx/6/
Resize until red
Continue make the browser smaller
<div id="container">
<div id="div1"><div class="content">one</div></div>
<div id="div2"><div class="content">two</div></div>
Why does div2 jump down a row instead of resizing? How can I solve this?
You are adding margins for the smaller screen size. Set the margins to a percentage and subtract the percentage of the width for the smaller screen size.
So do not set a margin in pixels. but in percentages.
Updated your code at //jsfiddle.net/dwDZx/9/
When the divs are red, there are two relevant constraints that the divs try to follow: width: 48% and margin-right: 10px. If the div is jumping down a row instead of resizing, that means there isn’t enough space for both of them on that row – they are trying to take up more space than is available. Thus, the second div makes a new row for itself so both divs can be as wide as they want. So let’s look at the numbers and see why the divs are asking for too much space.
Load http://jsfiddle.net/roryokane/kZZCh/, which dynamically displays the width of the page and each div, and make the Result panel exactly 400px wide, so the bug shows itself. Now the two divs are 192px wide. That makes sense – 48% of 400px is 192px. The width does not include the margin, which is 10px for each div. So the total width the divs are asking for is (192+10)*2 = (202)*2 = 404 pixels, which is more than the 400px allotted to them. No wonder the divs are wrapping instead of staying on the same row.
So how do you solve this? Dany’s answer suggests changing the margin-right value from a pixel value to a percent value. But that is only one possible solution. Finding the best solution depends on why you chose the two specific numbers in width: 48% and margin-right: 10px, and which number is more important to keep. If you need the width to remain at 48%, consider whether you want to keep a fixed margin width or switch to a flexible margin width. If you you still want a fixed width, use margin-right: 8px. If you want a flexible width, use margin-right: 2% (Dany’s solution). On the other hand, if you need the right margin width to remain at 10px, then for the width, use width: 47.5%. All of these values ensure that even when the page is only 400px wide, the divs stay on the same row.
Related
Is there any difference between declaring both width and max-width and declaring only one?
As I have understood, using only the max-width property causes all of an element's content to be fit dynamically when the viewport is resized.
Consider the following pen, feel free to resize the window to see what happens:https://codepen.io/harrison-rood/pen/KKzPQMW
The first example is an image with an explicit width of 800px.
The second is an image with a max-width of 800px, but a width of 100%.
See how one is responsive and the other is not? In the first example, we're telling the image it needs to be exactly 800px. In the second example, we're saying that the image should be a fluid 100%, but not any bigger than 800px, no matter what.
You can also use this idea in reverse. The third example has an image with a width of auto (as big as possible) but a max width of 100%, meaning that it will be as big as its container, but not overflow out of it.
The fourth example shows what would happen without max width. See how the image stretches way past its container because it is much larger?
Hope this clears things up! If it does, be sure to leave an upvote!
This is because screen resolutions can be different sizes. Lets say you have an element with a width of 15%, if you increase your window width, 15% becomes larger in pixels. You can set a max-width from preventing it from going over a certain width in pixels.
Using max-width, as the name implies, means that, when a container contains more content than it can fit, its width won't exceed the specified max-width.
max-width is specifically used to prevent a container's width from increasing when it contains more content than it can fit—instead, when max-width is specified, the content will overflow out of the container.
I'm trying to make some html code mobile-first, so I've stuck an #media to test for "desktop" widths (arbitrarily set to 45em in my sass at the moment). The idea for the two divs (#picture-block and #question-block) in question is:
$desktopwidth: 45em
#question-block, #picture-block
width: 100%
#media (min-width: $desktopwidth)
#question-block, #picture-block
width: 50%
float: left
Despite clicking around in my code inspector, I can only get my two divs in question to float left side-by-side when I kill both width properties (50% and 100%). I'm confused by this, because I thought display: block would have been the default, and I don't understand why the width property would affect the float. I'm using the jquery-mobile framework, but I can't see how it would be interfering in the code inspector.
I've created a codepen link to try to replicate the problem. My question: what do I need to do to the css to get the picture-block and question-block divs to float next to each other for desktop widths?
In the codepen, you also have a 1px border around the blocks. This causes the total width of each to be 50% plus 2 pixels. So two of them won't fit side by side in a 100% container!
Possible solutions:
either give them box-sizing:border-box to include the border width in the width
or, set the width as calc(50% - 2px)
(but not both.)
I have a webpage where all items on the page are inside a container but I would like to make everything smaller by 25%. I have tried:
Container.CSS
.container{
transform: scale(0.75);
}
But this technique shrinks the entire page making it about 2 inches offset from the top of the screen, and also makes all the items on the page blurry.
Question. Does anyone know a quick and easy way to do what I want to do, or will I have to individually make every item in the CSS 25% smaller?
Thanks
Since you haven't uploaded any code for us to edit, all I can say is that I would give the main page container or body a width of 75%, and then make every element inside have percentual widths, so they stay responsive.
But as you noted the transform: scale(0.75); solution, I conclude you also want the font, borders, etc to shrink. Your best solution is to convert the px values to em values (generally speaking 16px = 1em) for those things, and then change the body's font-size to 75%, shrinking everything in the page, because 1em has then become 12px.
Might take some time, but when you're done, your whole page has been made dynamic
Hope this helps
If responsive design so easy, all non-mobile friendly sites could be fixed in 1 minute. But it's not that way I'm afraid.
The individual items would need to have percentage widths on them. Using max-width with percentage widths is good too. For example you would have your main container set at 75% and a max-width of whatever the maximum your graphics can take inside. If your items inside have % widths then the one at 25% will always be 25% of whatever size the container is.
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
I would like to know whether its possible to have an element with a percentage width but to the closest x number (i.e. for my case 200).
The reason for this is because I have a fluid div which is set to 90% of the browser window while I have images at 200px that fill the screen, but because of odd sizes like 830px I am left with excess on the right hand side.
I believe some JS could achieve this?
You can use min-width, min-height, max-width, max-height. Play around with JSFiddle.Fiddle