I have these inline-block elements with a set height and width and overflow:hidden. On chrome, it lines up nicely, but in an older webkit browser, it does this:
.item{
display:inline-block;
height:72px;
width:144px;
overflow:hidden;
text-align:left;
}
If I change them from overflow:hidden to overflow:scroll, they all line up (and overflow: auto makes them all line up except the ones not long enough to need scrollbars)
It almost seems like it's hiding the overflow by just making it invisible but still saving that space. Is that what's causing this?
You need to add a vertical-align: top rule to .item, as inline-block elements will align via baseline (text bottom aligned) by default.
Related
so when adding an overflow hidden on this ul (which i want for hiding other items in the list) is causing the whole ul to jump about 10px up, can anyone suggest why this might be happening?
i have left the inline css on so it's easy to toggle to see
<ul style="
/* max-height: 25px; */
/* overflow: hidden; */
/* margin: 0; */">
https://jsfiddle.net/mt7qpn3L/
P.S. i know there are other ways to accomplish my hidden list but i'm curious why this is happening and a solution
set ul display: inline; in your style
and remove comment on overflow:hidden
Govind is on the right track. I just thought I'd answer why. It has to do with the text baseline, which is the default setting for vertical-align (vertical-align: baseline).
An interesting side point is that if you remove the UTF-8 characters (中国) the baseline will jump a few pixels since the baseline is different for those characters. CSS baseline is actually dependent on line-height. It is misleading since you expect the baseline to be the line where letters "sit", but the actual baseline overflows the bottom of the ul.
Thus when you add overflow: hidden; The <ul> will shrink to smallest possible height where everything is still visible. And your baseline, which no longer overflows, is now effectively cut to be at the bottom of the element. Therefore everything will jump around when you change overflow.
I think this is a good read about css-baselines: https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/
vertical-align: middle on both ul and li css selectors will center everything.
Is it possible to evenly space many elements in a div with changeable width.
Here's not working example. If we use text-align:center; elements will be centered, but margin:0 auto; is not working. I want to accomplish something like justify+center:
|..<elem>..<elem>..<elem>..<elem>..| // for one container width
|..<elem>..<elem>..<elem>..| // for smaller container width
|....<elem>....<elem>....| // even smaller container
Container will be user resizable.
One picture is worth a 1000 words:
Container(red box) width:100%; So user can resize it (browser window, js, whatever).
<--> represent even spaces.
In second row <--> are bigger because there is more room. I was able to fake it with:
text-align:center;
word-spacing:3em; // but any fixed value looses proportion
I recently read about a very clever technique to do exactly what you're asking.
In short, you just need to use text-align:justify; on the container element to achieve this, in conjunction with an extra invisible block at the end.
This works because inline-block elements are seen as being part of the text content, each being effectively a single word.
Using justify will spread out the words in your text so that they fill the entire width of the element with extra space between the words. For inline-block elements, this means that they are spaced out with even spaces between them.
I mentioned an extra invisible block at the end. This is required because normal text-align:justify won't justify the last line of text. For normal text, that's exactly what you want, but for aligning inline-block boxes, you want them all to be aligned.
The solution is to add an extra invisible but 100% width element to the end of your list of inline-block elements. This will become effectively the last line of text, and thus the justify technique will work for the rest of your blocks.
You can use the :after pseudo-selector to create the invisible element without needing to modify your markup.
Here's an updated version of your jsFiddle to demonstrate: http://jsfiddle.net/ULQwf/298/
And here's the original article that explains it in more detail: http://www.barrelny.com/blog/text-align-justify-and-rwd/
[EDIT]
One final update after seeing the image you've added to the question. (I don't have a better answer, but some additional thoughts that might be useful).
Ideally what you need here is a :last-line selector. Then you could text-align:justify the main text and text-align:center the last line. That would do what you want.
Sadly, :last-line isn't a valid selector (:first-line is, but not :last-line), so that's the end of that idea.
A slightly more hopeful thought is text-align-last, which does exist as a feature. This could do exactly what you want:
text-align:justify;
text-align-last:center;
Perfect.
Except that it's non-standard and has very limited browser support.
You can read about here on MDN.
I guess as a last resort it might be an option for you, if you can live with only partial browser support. It would at least get what you want for some of your users. But that's not really a sensible way to go.
My gut feeling though is that this as as close as you're going to get. Tantalisingly close to what you want, but just not quite there. I hope I'm proved wrong, but I'll be surprised. Too bad though, because I it would seem like a perfectly logical thing to want to do.
I worked on your example, you have to make a combination of block / inline style since the justify alone just work for inline (text).
div{
width:530px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
border:1px red solid;
text-align:justify; /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
width:60px;
border:1px yellow solid;
display: inline-block; /* Inline-block */
position: relative; /* relative to container div*/
}
div:before{
content: ''; /* position for block element*/
display: block; /* the block part for the last item*/
width: 100%;
}
div:after {
content: '';
display: inline-block; /* inline-block for the first (and middle elements) */
width: 100%;
}
If tried a different approach, in the fiddle looks pretty similiar to the picture but the space is fixed in both lines but the elements are intercalated.
div{
width:250px; /* I changed the div size, because you a have fixed width otherwise you should use scrolling */
border:1px red solid;
text-align:center; /* You will justify to 100$ of containing div, if you want to "center" just add another div with % size and centered */
}
div span{ /* I worked with your example you may use a class */
width:60px;
float:justify;
border:1px yellow solid;
display: inline-block; /* Inline-block */
margin-left:2%;
margin-right:2%;
}
In order to vertically align dynamic text I use span tag with display: table-cell property. It's wrapped by div with display: table property, and it works like it should.
But problem is that doesn't work in older firefox versions. Unfortunately, I need support for firefox 7 and greater.
Is there simplier solution beside using of real html tables?
display:table-cell isn't the be all and end all of vertical alignment. Vertical alignment can still be easily achieved with CSS alone.
You'll need three things:
A containing divider with a specific height (fluid or static, it doesn't matter).
A relatively positioned "padding" divider with 50% height.
A container for the content you're wanting to vertically align.
You will need to know the exact height of your content container, however.
div#container {
height:500px;
}
div#paddingDivider {
height:50%;
}
div#contentContainer {
margin:0 auto; /* Centrally align the element */
height:100px; /* Declare the exact height of the element */
margin-top:-50px; /* Position half of the element inside the padding divider */
}
JSFiddle example.
According to the MDN reference for the display property, table display via CSS has been supported since Firefox version 1. You should be fine!
I have a problem positioning a DIV with Chrome on this page. When I enter text into the red DIV it moves it down (doesn't occur in Firefox).
This shows how it was before putting why into the red DIV.
The height of the boxes is not being considered for vertical alignment (perhaps because the height is applied by the id and the display:inline-block is being applies by a class?). To solve this just add vertical-align:top; to your .box class.
BTW, since the heights are all the same, it might be easier to just put these in a container div to control the width and use float:left;
Using CSS,
I'm trying to specify the height of a span tag in Firefox, but it's just not accepting it (IE does).
Firefox accepts the height if I use a div, but the problem with using a div is the annoying line break after it, which I can't have in this particular instance.
I tried setting the CSS style attribute of: display: inline for the div, but Firefox seems to revert that to span behavior anyway and ignores the height attribute once again.
You can set any element to display: inline-block to allow it to receive a height or width. This also allows you to apply any other "block styles" to an element.
One thing to be careful about however is that Firefox 2 does not support this property. Firefox 3 is the first Mozilla-based browser to support this property. All other browsers support this property, including Internet Explorer.
Keep in mind that inline-block does not allow you to set text alignment inside the element on Firefox if running in quirks mode. All other browsers allow this as far as I know. If you want to set text-alignment while running in quirks mode, you'll have to use the property -moz-inline-stack instead of inline-block. Keep in mind this is a Mozilla-only property so you'll have to do some browser detection to ensure only Mozilla gets this, while other browsers get the standard inline-block.
<style>
#div1 { float:left; height:20px; width:20px; }
#div2 { float:left; height:30px; width:30px }
</style>
<div id="div1">FirstDiv</div>
<div id="div2">SecondDiv</div>
As long as the container for whatever is holding div's 1 and 2 is wide enough for them to fit, this should be fine.
Inline elements can't have heights (nor widths) like that. SPANs are already display: inline by default. Internet Explorer is actually the broken browser in this case.
Since you're displaying it inline, the height should be set at the height of your line-height attribute.
Depending on how it's laid out, you could always use float:left or float:right on the span/div to prevent the line break. But if you want it in the middle of a sentence, that option is out.
The problem is that 'display: inline' can't get a height associated because, being inline, it gets its height from its the content. Anyway, how do you define the height of a box that is broken at the end of a line?
You might try to set 'line-height' instead, or if this doesn't work to your satisfaction, set a padding:
/* makes the whole box higher by inserting a space between the border and the content */
padding: 0.5em 0;
You can only change the height (and width) of a span element when it is set to display: block;. This is because it is an inline element normally. div is set to display: block; normally.
A solution could be to use:
<div style="background: #f00;">
Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text.
</div>
To set height of span following should work in firefox
span {
display: block;
height: 50px;
}
text alignment inside the element you can adjust using the padding and block-inline attributes. display:inline-block; padding-top:3px; for example
height in em = relative line-height
for example height:1.1em with line-height:1.1
= 100% filled