I set a div to height:100px; width:50px, but when the content of the div is changing dynamically, I want to let the height adapt to the change.
What should I do?
Easiest way is to do
min-height: 100px;
this will set the minimum height of the div to 100px but allow it to grow as the content grows.
Like others have said min-height and min-width is what you need. It's a css rule and applied like this:
#someDivName {
min-height: 100px;
min-width: 50px;
}
Now your div will be 100px by 50px but if the content inside is bigger, it will adapt to the change. Like others before me have mentioned, min properties do not work in IE6 but who cares about IE6 anymore anyway. Even major sites like youtube has discontinued support for it.
min-height is a good practice. Also, rather than expressing the height in "px," use "em" which will scale with the current font.
Related
I'm looking to construct min-height: 100% sections and it seems the general consensus is :
html{
height: 100%;
}
body {
min-height: 100%;
}
and direct children have min-height: 100% as well. The problem I can't wrap my head around is if HTML has fixed height 100% while body may be allowed to grow, hasn't it shot out of the page and the document is not very semantic, i.e. html < body. Also, if your section is wrapped up in several other divs, all parents will require min-height: 100% as well. This seems a little unconventional.
What would be the most elegant approach to it? I know height:100vh is the best approach if it were supported by all browsers. Would it be better to use javascript to obtain the viewport and set all interested sections' height property?
The "unconventional" issue is actually very true and conventional. You see, browsers only calculate "horizontal" layout, not vertical unless explicitly set. So if you want an item to have a height of 100%, then you'll need to set some height explicitly to all it's ancestors so that the browser can calculate the dimensions.
I have a DIV that need a minimum width. I can't use the CSS min-width as its not cross-browser. I've created a inner div with a set width. When the browser is smaller than this inner div I get a scroll bar as expected.
The issue is that the outter div keeps shrinking smaller than the inner div.
See here for an example.
I would expect the blue to be the same width as the yellow.
Whats wrong with my CSS?
min-width is supported by all browsers except IE6. If you don't need IE6 support, you can use min-width like normal.
If you do need IE6 support, IE6 happens to treat width (and height) the same way that other browsers treat min-width (and min-height). You can use a hack to fake it:
#outer {
width: auto !important;
width: 1000px;
min-width: 1000px;
}
IE6 will apply the second width property (which it will treat as min-width) because it incorrectly ignores the !important on the first one. Other browsers will set the width to auto and the min-width to 1000px.
Hopefully I've understood your question correctly. Here's a modification of your original code with this update: http://jsfiddle.net/6e6yX/6/. Does this do what you're looking for?
If you add:
float: left;
To both of them, they'll behave as you're expecting.
http://jsfiddle.net/eVWKu/
Should we always try to not to give "height" to elements in XHTML through CSS?
if yes the i think min-height would be better idea instead of fixed height.
What cross browser, W3C valid css, non-javascript "min-height" method in css for browser which do not support min-height?
if i add min-height to any tag example <div> then in future in more content comes in then will we have to change height of div or if min-height is defined then no need.
Should i use min-height always in place of height?
What cross browser, W3C valid css, non-javascript "min-height" method in css for browser which do not support min-height?
My workaround usually is to insert an element that does not disturb the rest of the content, and is min-height pixels high.
Should i use min-height always in place of height?
There are instances when you want a height to be fixed, for example with a container whose contents are to overflow: auto, so I would say no, definitely not.
No. There are plenty of times when it is sensible to use height. (Those times aren't when there is variable height content (including any kind of text) in elements without overflow set to non-default, but they exist).
What cross browser, W3C valid css, non-javascript "min-height" method in css for browser which do not support min-height?
The only browser that people really care about which falls into that group is IE6, and it has a bug in which it treats height and min-height for overflow: visible content anyway. So:
#foo {
height: 10em;
min-height: 10em;
}
html>body #foo {
height: auto;
}
… or use conditional comments.
<html>
<head>
<style type="text/css">
div {
border:1px solid #000;
min-width: 50%;
}
</style>
</head>
<body>
<div>This is some text. </div>
</body>
</html>
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger. However, the border around the div stretches across the entire page width. This occurs in both IE and Firefox.
Suggestions?
I believe the div should be 50 percent of the page, unless, for some reason, the text inside the div makes it larger.
min-width does not set a minimum starting width from which your block will grow; rather it limits how far the block can shrink.
In min-width: 50%;, the 50% is in reference to the containing block. I've never used percentages with min-width, but I find it can be useful with other units. For example if I have a block (like a column of text) that I want to be full width, but I don't ever want it to go below a minimum width, I could use something like {width: 100%; min-width: 250px;}.
Note the caveats on IE support mentioned by others.
If you provide absolute positioning to the element, it will be 50% in Firefox. However, IE doesn't like the min-width or min-height attributes, so you will have to define width as 50% also for it to work in IE.
Without min-width, your div will take whole page width, that is how display:block elements behave. Adding min-width cannot make it smaller.
Changing display property to absolute or float property to left will make the element to shrink to fit contents. Then, min-width start to make sense.
To add to what Chris Serra said, in IE < 7 (and in 7? I can't keep track these days, but definitely < 8), width behaves exactly like min-width is supposed to behave.
You are telling it that the minimum width is 50%. Since there is nothing else taking up the space, it will take all of it (except for margins).
If you give it a max-width of say 75%, firefox should constrain it to that. IE6 will still ignore it.
As David Kolar already said, many of us typically do not use percentages for min-width.
You may want to try an IE specific style-sheet and include and expression like:
print("width:expression(document.body.clientWidth < 1024? "50%" : "100%");");
This will change the width setting based on the width of the browser window at load time. I personally like to use px as the unit measurement, but you need to try it with your specific setup.
Summary
What's the best way to ensure a table cell cannot be less than a certain minimum width.
Example
I want to ensure that all cells in a table are at least 100px wide regards of the width of the tables container. If there is more available space the table cells should fill that space.
Browser compatibility
I possible I would like to find a solution that works in
IE 6-8
FF 2-3
Safari
In order of preference.
This CSS should suffice:
td { min-width: 100px; }
However, it's not always obeyed correctly (the min-width attribute) by all browsers (for example, IE6 dislikes it a great deal).
Edit: As for an IE6 (and before) solution, there isn't one that works reliably under all circumstances, as far as I know. Using the nowrap HTML attribute doesn't really achieve the desired result, as that just prevents line-breaks in the cell, rather than specifying a minimum width.
However, if nowrap is used in conjunction with a regular cell width property (such as using width: 100px), the 100px will act like a minimum width and the cell will still expand with the text (due to the nowrap). This is a less-than-ideal solution, which cannot be fully applied using CSS and, as such, would be tedious to implement if you have many tables you wish to apply this to. (Of course, this entire alternative solution falls down if you want to have dynamic line-breaks in your cells, anyway).
Another hack is the old 1x1 transparent pixel trick. Insert an 1x1 transparent gif image and set its width in the image tag to the width you want. This will force the cell to be at least as wide as the image.
I know this is an old question but i thought I'd share something that wasn't mentioned (Although pretty simple in concept..) you can just put a <div> inside the table (in one of the <td>'s or something) and set the <div> to min-width. the table will stop at the <div>'s width. Just thought I'd throw that out there in case somebody comes across this on google. Also, I'm not so sure about how min-width is handled in I.E6. but that has already been covered in another answer.
I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
what about this css property
min-width: 100px
but it doesn't really work in IE6 if not mistaken
if you don't want to do it in the css way, I suppose you can add this attribute
nowrap="nowrap"
in your table data tag
This is a cross-browser way for setting minimum width and/or mimimum height:
{
width (or height): auto !important;
width (or height): 200px;
min-width (or min-height): 200px;
}
IE 6 doesn't understand !important
IE 6 sees width/height:200px (overwriting auto)
Other browsers understand the min- and the !important
I am not 100% familiar with the behaviour of widths in TD elements, but this all works nicely on eg DIV tags
BTW:
Based on a combination of Vatos' response and a min-height article here: http://www.dustindiaz.com/min-height-fast-hack/
This is not working because of the order of the first 2 lines, they need to be in the right order (think about the above) ;)
IE6 handles width as min-width:
td {
min-width: 100px;
_width: 100px;/* IE6 hack */
}
If you want IE6 to handle width like normal browsers, give it an overflow:visible; (not the case here)