I have a page with several arbitrarily-sized blocks of content. Is there a way I can:
Allow these blocks to resize larger or smaller to fill all available space as the window size changes,
Specify a minimum size for each of these blocks,
Hide the block completely when it will not fit on the page at the specified minimum size.
I have full control over the HTML and CSS. I would strongly prefer a solution without Javascript.
#dark; may be you want a fluid website. So,
1) give width in percentage instead of px to the div for re size larger & smaller.
check more http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
http://www.alistapart.com/articles/fluidgrids/
2) yes you can define min-width for your block like
.block{
min-width:20%;
}
3) For hiding a block or change in design with certain window size you have to define min-width or max-width in media query.
check the link
http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
http://nathanstaines.com/demo/media-queries.html
http://css-tricks.com/css-media-queries/
For the 1st, you can set width and height with a % value. This will cause the "blocks" to resize as the "window size changes". For the 2nd, you can set the min-width and min-height, so that whatever the size of the window, the blocks will not shrink smaller then your specified values. As for the 3rd, you will have to use javascript.
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 a horizontal layout (with columns) where the content scales based on the browser window height.
I came across answers about perfect ratio based on width, but I want to have an infinite width (as the amount of content won't always be the same).
Is this possible just using HTML/CSS?
It is going to be hard to maintain the aspect ratio with css, but if you set the height of the maincontent box to 90% and the height of the containers to 100%. They should respond to
the browser window. But only in height, never in width.
From there you can use javascript to set the with to be <height> * 1.5 (or similar) you will have to do this in the document ready event, but also in the window resize event.
Is it possible to set width in CSS in percents of height? Like on picture:
No, you can't do this with CSS.
You can not set height like that in css.
There is little use even if You can, because different users have different preferences about using toolbar which occupy height on monitor, some even have multiple lines of bookmarks, some view Web in full screen - therefore there is no point of setting page layout according to browser height.
Only good recommendation is setting width to 1000px because most current day monitor resolutions can display that without horizontal scroll.
I'm building a Google Chrome extension and need to have a particular <div> tag resizable. This works, but it can only be resized to be larger than its original size, not smaller.
According to this question, this is set by the browser.
Are there any workarounds that allow the div to be made smaller?
AFAIK, there is currently no way to use a CSS resize attribute without a fixed minimum width unless you explicitly set that width.
If you wanted to resize a DIV that is currently 200px to 100px in height, you have to set the styles height to 100px to force the resize attribute to start resizing from there.
What's the basic difference between [width and height] and max/min[width and height] and where should we use each of them?
Thanks in advance........
The basic difference is that width and height will specify the exact width and height of an object. Max/min width and height will specify the maximum or minimum height and width that an object needs to be.
Say you had a div that you wanted to load images into, but you wanted all images to be the no larger and no smaller then a specific width or height, then using min/max calls would be ideal.
In other cases, where you know the width and height (say for only a specific image) then you do not need max or min height/width calls.
It is also important to note that max/min height and width calls will over-ride height and width calls.
Here is some more information:
CSS Height and Width
CSS Tests - Min and Max
width/height give you the strict constraints. max-height/max-width tell your element to be not wider/higher than a certain value, but the element can still be smaller than that value.
max-height/width are commonly used when you want to make the site behave according to the screen it is viewed on, but to not be super huge on the large screens anyway. The same about the elements - you might want to accept images of any size, but want to make sure they are not breaking your site layout. Hence you use max-width/height.
They don't work in IE6 though. If you need to support min-width/height in IE6 you can use regular width/height. IE6 will treat them as minimum values anyway and will expand them in case content needs more space. Both min/max width/height work fine in IE7+