When you set a button element to display:block it dominates its vertical space like a block while still calculating its size based on its contents like an inline-block. This seems like a really useful behavior. Is it possible to make other elements behave this way?
Example
I can accomplish a similar method of display using floats and clears, but it causes havoc on nearby content that isn't tailored to it.
I can accomplish it more sanely by wrapping each element and making the outer element display:block while the inner element is display:inline-block. This requires extra markup though.
Sounds like you want display: table.
Such a “table” shrinks to just fit its content, and if the content is not a display: table-row or display: table-cell then it is just treated as if it were inside a single-cell table. You can also center it horizontally using auto margins.
I changed block to table in your example and it did exactly what I think you want.
(If you've thinking about the advice “don't use tables for layout” — that is referring to using tables written in HTML markup, not any CSS facilities.)
Related
I have quite an interesting problem in front of me. I think it would be better to illustrate it in codepen:
https://codepen.io/BooleT/pen/bWdPWe/
In the class names ib means "inline-block" and iib means "inner inline block".
I have created figures to illustrate what I am trying to achieve. In the next 3 paragraphs I will reference the images in this album:
https://imgur.com/a/9CFAm
So there are three inline blocks, one of which is actually a container of three other inline-blocks:
The effect I want to achieve is to make the contents of the container to wrap into 2 lines when I resize the window:
But instead I only manage to wrap the whole container itself to the second line:
Is there actually the way to achieve what I want? I've tried to add nbsp between outer inline-blocks and to add white-space: nowrap to the body element (and overwrite it to white-space: normal for the container), but none of it worked.
I know that I can work around it by adding media-queries or js that simply reduces the width (or max-width) of the container when I reduce the screen width, but it doesn't seem like the solution. I don't even know the width of every block in my real layout.
I will try to keep an open mind, since the solution to this problem might require to change the entire layout of the page, but I do think there is one.
Being not a fan of flexboxes – the burden of old-browser compatibility still standing strong where I come from – here's what we do to make a container on the right occupy all the remaining horizontal space:
Codepen
The fixed-size divs on the left are told to be float: left.
The spanning div on the right is given display: block.
The smallest inner divs are display: inline-block.
If you can use flexbox then this pen: http://codepen.io/anon/pen/RVWwEP seems like it does what you want. Be aware of the compatibility caveats that go along with flexbox, though.
For convenience I've put display: flex; on the body to create top level row, although #10nikov's answer is definitely a better way to do that.
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.
I have emoticons in a css sprite image that I want to display within text, so I have spans inserted with background definitions but as these spans are inline elements I can not define the width and height.
The only thing I could think of is make them block elements and float left, but I'm not sure if this is the best approach. What do you think is the best way to do this?
try to use the css property and value display: inline-block
I do not think that display: inline-block is supported enough to rely on. Obviously I am talking about <=IE7, and possibly other mobile devices. Which unfortunately are still in use. However there comes a point when one stops supporting IE.
I would try using a div floated, with background attributes set. Failing that a single image.
How do you choose when to use DIV and when SPAN, to wrap something?
Many time when we make PSD 2 HTML, in some conditions to get any effect or to wrap something to get needed effect, we use div or span.
And I know div is block level element and span is inline level element and we can change display properties through CSS. and I also know div cannot come inside span.
What are cases when you use div as a display:inline and span as a display:block? and should we try to avoid those scenarios? is this semantically incorrect?
and when we use blank div or span (no content inside) to get some effect, than which is correct?
As you note, you should use divs as dividers of blocks, and spans for marking inline content.
And yes, you should try to avoid changing the display types of them.
Regarding blank element, div is better as you can define its width and height while for span it won't have proper effect.
Most simple example to prove this point can be seen in action here: http://jsfiddle.net/yahavbr/4DZkV/
This is still a good question but the suggested answers only seem to address part of the question. There are three CSS display types, which help put this into perspective: inline, block, and inline-block. If you read this other Stackoverflow topic, CSS display: inline vs inline-block, I think you'll get some useful guidelines. For example, if you need to ensure the element has distinct top and bottom padding and margins, then it probably needs to be a div (with CSS style inline-block), otherwise a span is probably a better choice.
I have written code that automatically creates CSS sprites based on the IMG tags in a page and replaces them with DIV's with (what I thought was) appropriate CSS to position the sprite image as a background letting the appropriate part show through -- the problem is that I cannot get DIVs to behave as drop in replacements for IMGs.
If I leave the default 'display' value set to 'block' then if the original IMG was positioned at the end of some text, the replacement DIV will jump down to the next line after text (which of course is what I would expect something with display: block to do).
If I change the 'display' to inline, then the DIV stays on the same line as the text but it ignores the 'width' and 'height' I have set and collapses. I've tried putting 's inside the DIV but it then only takes up enough width to contain the nbsp.
I've tried experimenting with setting display to all possible values (including the "obscure" ones like 'table-row', 'run-in', 'compact', etc) but all with no luck. Is it even possible to create a DIV with the same layout behavior as an IMG?
I am open to having something more complicated than just a single DIV, however I've tried the obvious things there (one DIV inside another where the inner DIV is set to display: block with the outer set to display: inline) but I haven't found a combination there that works either.
There are always specific things I can do outside of the replaced IMG/DIV to get the layout I want, but my goal is to have a generic auto-CSS-sprite mechanism that works regardless of the rest of the HTML.
Did you try display: inline-block; ?
you may have to also use display: -moz-inline-block; for firefox2
Images have an equivalent of "display: inline-block". This was not originally included in CSS but was added in part to address the fact that images behave this way.
The issue is that all browsers are just now supporting it. If you want to support browsers from even a year ago, you are stuck.
Another, but not as great, solution is floating the div ("float: left").
inline-block : Introduced in CSS 2.1. This causes the element to generate a block element box that will be flowed with surrounding content as if it were an single inline box (behaving much like a replaced element [meaning an image] would.).
Source Mozilla Developer Center
Display: inline-block is supposed to work in this situation. Did you try it?