I was writing the layout of an app using the box-flex property (in Chrome) and I have found a strange behaviour, in my opinion, that I am wondering if might be a bug or that I just ignore the reason for those workings.
The code looks like this: http://jsfiddle.net/5tuCh/
There is a weird "div" resize when resizing the "textarea" so that the dimension of the "div" minus the "textarea" is equal to the dimension of the second "div", in order to satisfy "box-flex:1.0" I guess. Now if the reason for box-flex was making it easier to arrange the layout, this behaviour makes it unusable in this case.
Might it be that I am missing something?
Thanks.
This is in fact correct behaviour. From MDN:
The containing box allocates the available extra space in proportion
to the flex value of each of the content elements.
In your example, div.text boxes actually render with a height, meaning that any space beyond that would be spread evenly (or, rather, according to the flex ratio) between the elements. Setting height:0 on these elements would force behavior that I believe you're after (fiddle: http://jsfiddle.net/5tuCh/16/); I also had to remove the height:100% declaration on your textarea to prevent it from collapsing inside an element with zero height. I'd speculate that you may accomplish the textarea to take up full height of the parent element by setting its box-flex property as well.
Update:
OP's having issues with textarea behaviour could possibly be addressed by the following style:
textarea {
position:absolute;
top:10px;right:10px;bottom:10px;left:10px;
resize:none;
}
The parent element, of course, has to have position:relative set, which would result in the textarea taking up all available space in the container (w/10px spacing between the borders). Not sure if that's what you were after though. Fiddle: http://jsfiddle.net/5tuCh/36/
Related
Here and there I see suggestions that I should always set width on floated items. But when I'm exploring CSS of popular web-services (such as Twitter/Google), I see that almost nobody does that.
Is it still considered good style to always set width on floated items? In which cases should I set 'width' property and when it can be safely omitted?
Some quotes:
SmashingMagazine says that:
“You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.”
HTML and CSS: Design and Build Websites book says:
When you use the float property, you should also use the width property to indicate how wide the floated element should be. If you do not, results can be inconsistent but the box is likely to take up the full width of the containing element (just like it would in normal flow).
Well it really depends on the browser, you must check the results in multiple browsers to be sure that none of them "misunderstood" your settings. I'd set a width anyway, because no browser can misunderstood that.
Block element takes the full width of the parent. If you use float it will not take the full width, the width would be how much the element width it is.
i use width with floating elements in percentage of the containing div , the only problem you get is that the containing div might not wrap arround its content , so you have to put on the main div overflow:auto
Posted some times ago on SO Span to take full height on a TD, as I tried some workaround, I've found a suitable code to do what was expected (the accepted one), but wasn't able to determine why this is working, so why
<td style="padding:0px;">
<span style="height:100%; width:5px; background-color:pink;"> </span>
</td>
make so much difference with
<td style="padding:0px;">
<span style="height:100%; width:5px;
background-color:pink;display:block;overflow:auto">
</span>
</td>
Here's a jsfiddle to explain more http://jsfiddle.net/7kkhh/2/
Can someone who know in depth the mechanism behind display and overflow explain this? (is it related to this particular situation or is it commonly used ?)
EDITED:
This seems to only happen on Chrome
A span element is, by default, rendered as an inline-block, just like text-nodes. They collapse around their child elements (or: they take up as much space as their child elements need, but nothing more than that).
A div element is, by default, rendered as a block. They expand to the size of their parent element, unless their child elements don't fit in it. If overflow (actually a shorthand for overflow-x and overflow-y) is auto (default), the element will expand until it's child elements fit. That will in turn expand it's parent elements, unless they have an other value set for overflow. If overflow is scroll, the element will not be expanded if the child elements don't fit in this element, but instead scroll bars will be displayed. If overflow is hidden, the element will not be expanded, but the (parts of) the child elements that are outside the parent element will be hidden (this doesn't mean that you can't scroll the element, but no scroll bars will be visible).
As inline-block conflicts with height: 100%;, the CSS style is ignored while rendering. A table cell has a display value of table-cell or something similar. I am not sure about it's behaviour. Tables and layout are always a troublesome combination to get a consistent layout in different browsers. Validating your document in xhtml-strict will usually help with displaying your document consistently across browsers.
overflow determines what happens if your block does not fit it's given dimensions. This is especially important if you are loading a picture as well.
For display you might want to read up on this :
SPAN vs DIV (inline-block)
Now the difference:
prepare the size of whatever I estimate to be in here and make it pink
vs
background-color:pink;display:block;overflow:auto">
make it pink now this was actually a block not a span and it it does not fit increase size until it does.
But seems you code shows unwanted behaviour on firefox as well and only works on chrome suggesting that maybe this is not the solution you are after.
Since I am having trouble with Firefox about positioning a block element by nature (header) to be inline by using display:run-in; i'm asking you for your help ! been searching for quite some time now and I cant find which CSS method could be used instead of just applying display:run-in; to the element, which is supported in all the major browsers. It is crucial that i position the element this way.
Anyone knows a method how to do this ?
If you'd like to display your element as a block element, but would position it inline, then
display: inline-block;
will do the trick for you.
The MDN still lists run-in as an experimental value, so we shouldn't be too surprised if it doesn't fully function in Firefox at this time.
As for options, there are at least two you could use: display: inline and display: inline-block.
Inline might suffice if you don't need the properties of a block element on your header. Inline-block keeps it as a block element, so you can still do nice things like give it width, height, margin and so on.
View them on JSFiddle.
Alright i found a solution ! :) Using display:inline; in a combination with float:left; will make a block element by nature use space only as much as he needs, not full 100% of its parent element.
There is just one problem with this tecnhique if you are using bigger font for lets say a heading and want to add a paragraph right after it (on the same line). If the headings font-size is a bit bigger, heading could take 2 or even more lines of space in height where paragraphs text should be,and you will have a small gap between header and another row of paragraph under it. The solution is to add display:block; and margin-top:Xpx; to the paragraph element to align it as needed.
In all major browsers: as the question states, a parent <div> container (whose height is not set) over-sizes its height to fit a child <img> element (for instance, a 300-pixel tall image that is the only thing inside the div). The over-sizing is usually about 3 to 5 pixels, and appears at first as img margin-bottom or div padding-bottom might look.
However, using absolute positioning, it is clearly demonstrated that the bottom of the div is below the bottom of the imgby a few pixels. It might not ruin a website's design, but it is a hurdle to overcome in certain situations. I have made a fairly detailed fiddle demonstrating this issue here.
Why is this standard practice in web browsers?
Is this meant to compensate for something? It seems unnecessary.
Is this a bug, or a soon-to-be antiquated feature?
EDIT: Thanks to the answerers/commentators below, I know the reason is that an <img> is treated by default as CSS
display:inline which preserves whitespace around the element.
Changing it to display:block completely fixes the problem by
eliminating whitespace around the element.
Notes: This over-sizing can be averted by giving the image child element a CSS property of float:left or float:right, etc., but this is a workaround, and as such is not the answer to the question. One reason this can be problematic is if you already have other float elements layered in front of the div child image (float overlap not allowed Firefox, Opera, IE. float overlapping only seems allowed in Chrome and Safari using CSS position settings). Thanks!
Add display:block to your image. I think that will fix the problem.
I have a block-level element of unknown width. This element needs to be horizontally centered on the page, and its position needs to be relative so that its absolutely positioned child will show up in the right place. You can see it in action here.
As far as I know, the best way to center an element of unknown width is to set its display to table. Semantically, this seems incorrect, because my element has nothing in common with a real table. Even worse, Firefox doesn't apply position to tables, so the absolutely positioned child shows up in the wrong spot:
Are there any workarounds for this that:
don't add any extra elements to the html
don't calculate and set the element's width with JavaScript
I'd like a pure CSS fix, and I'm running out of ideas...
Adding display: inline-block; to the element (#box) should suffice. This will cause it to become an inline element and still keep its "boxy" properties. Its width will automatically take up the width of its children.
Then you can set its alignment by setting text-align: center; on its parent.
IE7 does not support this display value (only on naturally inline elements), but the situation is the same with table (no support at all). You can use a hack though to make inline-block work in IE7.
jsFiddle Demo
If worst comes to worst, you could try text-align: -moz-center; which is a Firefox-specific method of centering block elements like inline-elements.