What is major differences in using these css rules
div{width:100px; overflow:hidden;}
And
div{max-width:100px; overflow:hidden!important;}
Is there going to be any cross-compatibility Issues.
max-width is great for stating "don't go any bigger than this, but it's OK if it's smaller".
This might be great if you were doing say a speech bubble that could be dynamic in size (depending on content) and you wanted the div surrounding speech bubble to vary.
width on the other hand says "the must be 100px", which means even if the content within the div is smaller, the surrounding div will still be 100px.
Example:
http://cdn.gottabemobile.com/wp-content/uploads/2013/10/photo1.png
max-width: 100px is not different from width: 100px if you do not have width specified. And the !important flag only prevents from overriding the property, so it depends on the context if that makes a difference.
Related
First of all, I am searching for a pure CSS solution. I can do it really easily with JavaScript, so don't bother giving me hint on how to do it in JS.
I have a web page with 3 container. 2 of them are fixed, the other one is static.
I want to give the static container a padding top and bottom equal to the fixed container.
The first fixed element have a fixed height, so that's not a problem, i give a padding equal to the height :
#header{
height : 100px;
position : fixed;
}
#content{
padding-top : 100px;
}
But the second fixed element is dynamic since we are using a CMS. Some element can be added by the client and we want the layout to adjust automatically.
You can easily see what i'm trying to do in this Fiddle, just uncomment the JS to see the desired Result.
P.S.: I support iE8 and older.
P.P.S.: I am totally aware that it may be impossible w/o JS. If so, just tell me in comment.
Since #header and #footer are fixed positioned, they are taken out of the document flow and have no relationship to #content anymore.
Therefor you have to options (imho).
1) give the footer a fixed height, so you can do the padding trick, same as with your header.
2) use Javascript, since there is no pure CSS solution (except for 1. point).
NOTE: the motivation behind this post is solely to understand CSS better. CSS remains mostly voodoo to me (despite hours and hours and hours of studying it), and I'm certainly not looking for any more voodoo (i.e. more "workarounds" or "hacks"). I'm looking for insight into CSS.
I have found two approaches for centering a div within its container. (Throughout this post I'll call the div to be centered #inner-div.)
The first approach is based on giving #inner-div the spec margin:0px auto;; the second one consists in giving #inner-div the spec display:inline-block.
AFAICT, the margin:0px auto approach also requires explicitly setting the width of the div, as illustrated in this jsFiddle; the key bit of CSS is
#inner-div {
margin:0px auto;
width:100px;
}
(To see what happens if the width specification above is omitted, see this jsFiddle.)
Similarly, AFAICT, the display:inline-block also requires 1) giving the spec text-align:centered to the element containing #inner-div, and 2) preventing the extraneous bottom-margin that the display:inline-block entails for #inner-div (this could be achieved, e.g., by giving the spec vertical-align:top to #inner-div and, AFAICT, any additional descendants with display:inline or display:inline-block). See this jsFiddle, in particular the following bits of CSS:
#outer-div {
text-align:center;
}
#inner-div {
display:inline-block;
vertical-align:top;
}
I find both approaches problematic. The second approach is clearly problematic, since the display:inline-block gives the affected div text-like semantics, resulting in unexpected behavior (like the seemingly gratuitous bottom margin mentioned above).
The first approach, on the other hand, requires the specification of #inner-div's width. This precludes the possibility of having this width specified implicitly by the widths of the contents of #inner-div. I don't like this: I often need to center divs whose width is difficult for me to determine, even at run-time (e.g. this width may depend on font-metrics, or the way the flow works itself out within #inner-div, etc.). After all, as the jsFiddle's given in this post show, the browser already computes the height of the #inner-div based on its contents (IOW, one doesn't have to explicitly specify #inner-div's height for the browser to do the right thing). Why can't the browser also compute #inner-div's width?
It seems to me that any reasonable layout system would allow one to say to the browser: "figure out the width of this div, based on the width of its contents, and center it within its container".
My question has two parts:
I'm looking for a well-informed confirmation that CSS really does not provide any way to direct the browser to compute the width of a div (based on its contents) and then center said div within its containing element; and
if the answer to the last question is "yes", is this so merely due to poor design on the part of the creators of CSS, or is there a good reason for CSS not to support this natural (to me at least) functionality?
Note: these are difficult questions; the second, in particular, requires not only a a command of the CSS standard, but also an understanding of the design of CSS itself: a pretty tall order!
Without a given width to work with, how would the browser know how to calculate the flow wrapping? It would be nice to tell the browser to 'make it look good', but they just aren't that smart. I feel your pain though; a fixed minimum width with a on-overflow-expand would make life easier.
How about setting the width as a percentage of the page width, or setting it dynamically with script?
I agree setting the div to a inline-block/table-cell/whatever introduces more trouble than it is worth.
BTW "margin: auto;" is enough, "margin:0px auto;" seems contradictory.
I need to make ui controls panel, that has 100% width and gradient background. UI elements on this control panel should have width 1000px and should be centered.
For a moment i have two elements:
panel (width 100%, gradient background), global wrapper
panel-wrapper (width 1000px, transparent background), is placed inside "panel" element, contains UI elements.
It works brilliant in all browsers i need, but i really don't like to use two HTML elements, when logically it should be just one. Perhaps it is possible to have one element "panel" with fixed width (1000px) and auto-padding, that will cover all free space to the left and to the right? (i've made an image to show it if my explanation is crazy :))
It is possible?
You could potentially use the calc() function, though it isn't highly browser compliant.
Here is a quick example and more information on compatibility and usage can be found here.
*I made the example in Firefox, didn't test it elsewhere.
Just for a quick code example, the following shows one solution:
div {
width: 100px;
background-color: blue;
height: 100px;
padding-left: calc(50% - 50px);
padding-right: calc(50% - 50px);
}
The challenge is you can't really combine percentages and fixed widths with padding in the traditional sense, since the padding is added to the total width.
If the total width is 100%, and you want the content in the center to be 500px, you can't calculate the padding.
With CC3, though, you can use the box-sizing to change 'where' the padding is placed in the box model.
http://www.css3.info/preview/box-sizing/
Alas, I still don't think that will give you want you want simply due to there still being an unknown variable in play (the width of the container that the 100% width object is in).
In the end, we can sometimes over think these solutions in the name of over-optimization. IN this case, an extra div seems perfectly acceptable and, likely, the proper solution.
Why padding ?
You could set left and right margins to auto and that would make the div centered..
So just set
.panel{
width:1000px;
margin:0 auto;
}
I have a sidebar DIV on my web page that has buttons. I have the width of the sidebar set as follows:
width: 20%;
but when the browser size is reduce then there's sometime not enough space for the buttons. Is it possible for me to have the width as 20% but also specify a minimum in px?
Yes. This is pretty common, too. Have fun!
And protip: you can always just try and find out ;)
Yes. The W3C CSS recommendation generally does not require that units for different dimensions like width and min-width be the same. (Not quite relevant side note: You can even mix different units for dimensions like padding, e.g. padding: 2px 1em;.)
Using “min width”.
min-width: 20px; for example.
But if you want its width to always be at least the size of whatever is contained, consider using display: table-cell;
I have a <textarea> that needs to fit into a space whose size is not pre-determined (is a percentage of the screen size). I can get good results if FireFox by setting the regular CSS properties:
#container { width: 70%; height:70% }
#text_area { width: 100%; height: 100%; margin: 0; padding:0; }
However in IE 6 and 7 I get different, odd results. In IE6 the textbox appears to have padding to both the left and the right, pushing the size of my container to grow. In IE7 the textbox has padding to the left, but does not make the size of the container grow - instead its right edge pushes outside of the container.
The height setting seems to have no effect in either IE6 or IE7; the <textarea> is 2 rows long in both cases, ignoring the height:100% directive.
Is there a consistent way to size a <textarea> across browsers?
Is there a way to get rid of the padding to the left of the <textarea>?
Update
Using position:absolute removes the padding, but the width:100% is still screwed up. IE7 seems to calculate the 100% width to be too large, resulting in a <textarea>that spills out of the <div> that contains it.
I'll create a stand-alone example if I get a chance...
I've seen this problem with ASP.Net textbox controls also in IE7. I couldn't remember where I found a solution (but props to the person that found it), but I was having the same problem where the textbox with width="100%" would actually break the DOM and my entire content section would "spill" onto a neighboring section (such as a table based navigation).
The solution I eventually adopted was to wrap the asp:Textbox inside its own table and set the "table-layout:fixed; width: 100%" property and on the textbox/textarea "position:relative; width: 100%;" so the block would look like this:
<table style="width: 100%; table-layout: fixed;">
<tbody>
<tr>
<td>
<asp:Textbox id="txtMyTextbox" runat="server" Width="100%" style="position: relative;"/>
</td>
</tr>
</tbody>
</table>
This is not the prettiest solution, but I have verified that it does work cross all browsers. I have a write-up on this issue HERE.
Hope this helped.
There may be a sneaky CSS way to achieve this that I don't know about, but in my experience this is one of the things where using a bit of Javascript is justified.
You could get the height you need (of the current window I presume) using JQuery or Prototype, or in pure Javascript: Get the height of the current document and then
document.getElementById("text_area").style.height = calculated_height+"px";
The left hand padding I find odd, though. Can you post an example?
In order to solve this kind of problems, one has to think about how percentage is handled in the browser. First of all.... percentages don't exist, they are converted to pixels at some point. The steps are 1) browser renders all tags, 2) browser measures outer, parent, percent-sized boxes to get its size in pixels, and sets the size of the child boxes according to their percentage size.
I think the first thing to verify is the size of textarea's parent box, and it's parent box, and so on. This can be done by checking the "Layout" information in Firebug and IE Developer Toolbar, and find out what's measured differently in both browsers. Once you find that element (or elemets) css can be adjusted to consider them.
Have in mind that percentage sizing considers the width and height of parent box content to size the child element and not padding. So, if a parent box width is 500px and has 100px padding, a child element with 100% width will be 500px and the 100px padding will be around it, and both elements will take 700px of your screen.
Try
adding a min-height:100% on the text area css. On the div containing the absolute positioned , set the position to relative on your css.
also use transistional Doctypes instead of strict, while your at it. Make sure there are no unclosed tags. I would be better if you can make the page XHTML or HTML standard compliant so that you will have less problems with cross browser compatibility.
Try adding display:blockand border:0 to your #text_area.
The former should take care of the height-issue and the latter prevents the width:100% to spill over.