Overflow doesn't appear to be working when I use display: inline. I need to have the text inline, because it's something that appears at the top right of the webpage with "Hello," in front of it and a drop down arrow behind the name. If I remove the display: inline, the overflow works, but then the word in front and the image behind the name drops to a new row. I tried using inline-block, but that causes the text to actually wrap, though it's hidden, the name looks like I superscript it.
How can I make this work property?
div.actualName {
display: inline;
width: 40px;
height: 20px;
overflow: hidden;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Use inline-block but add the vertical-align:top rule. The default vertical alignment for inline elements is baseline.
div.actualName {
display: inline-block;
width: 40px;
height: 20px;
overflow: hidden;
vertical-align:top;
}
This is
<div class="actualName">Bobby Joe Sanders</div>computer.
<br/>
Using a styled span might be more useful in this particular example versus applying a div and class to style a few words in your line of text. Spans are more similar to in-line elements while divs are more like block elements. Let me know if it helps! Good luck.
Related
I was trying to center text in two adjacent divs and I can not understand what I am doing wrong.
Basically I have 2 divs each taken 50% of the window. The first div contains an image (which I successfully centered) and I am trying to center the text in the second div. So here is my Fiddle and I am using the following css:
.thumbnail-descr{
text-align: center;
min-height: 10px;
display: table-cell;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
}
There is no point of having original DOM structure or CSS (the main thing is to have 2 divs taking all the width and one has a centered image another one has a text. How can I achieve it?
What I understand from the example is that you want to vertically center "Descr". There are several tricks to do that:
Adjust the padding and use box-sizing border-box to have better control of the height.
Use flexbox (still not broadly available): https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
If you know before hand that you'll have only one line of text you can use line-height.
(See the update for another option)
For example see this Fiddle:
.square{
width: 45%;
height: 200px;
border: 3px dotted #ddd;
display:inline-block;
margin: 0 10px 0 10px;
line-height: 200px;
}
But take a few things into account:
This will work only if you have one line of text, because on text wrap it will be broken.
This is not the normal use of line height, it's taking advantage of a side effect: text is vertically centered to the line-height.
This trick is used by some CSS frameworks (ie Bootstrap) to center the text on some components.
Update
I forgot another option, since you have one div inside the other you can use position: relative on the parent, and use absolute position for the child using top: 50% and a negative top margin. You'll need to setup the top margin to the half of the child height. (that's how modals are usually centered):
.square { position: relative; /*..*/ }
.thumbnail-descr{
position: absolute;
top: 50%;
margin-top: -10px;
/*...*/
}
See http://jsfiddle.net/diegof79/M4fKM/1/
Also you asked why your solution is not working... this can help to understand the reasons: http://phrogz.net/css/vertical-align/index.html
Before proceeding to giving you the solution, you could have he exact same result with a lot less code, giving so many classes for so little content can only lead to huge code.
The span class you are giving the text-align:center, doesn't fill up the whole width of the parent, so, where would it center the text since its width is equal to the text?
You can either put a 'text-align:center" to the span's parent, the square class, but I would use a different approach in general.
Not sure if you need a span.
If you remove span tag and use same css for the div styles, or simply ad a span class name to a your div class name- works perfectly.
i think the issue happen because the width in the description div
Try this suggestion:
warp the with div, the div will use thumbnail-descr class
<div class='square'>
<div class="thumbnail-descr"><span>Descr</span><div>
</div>
Update the thumbnail-descr
.thumbnail-descr{
text-align: center;
min-height: 10px;
background-color:red;
vertical-align: middle;
font-size: 26pt;
color: #bbb;
width:100%;
}
hope this help
This doesn't occur in Chrome. I am trying to implement an Ellipsis for the nested element. Has anyone else come across this and, if so, were you able to work around?
<span>bar <span class="foo">foo</span> bar</span>
span.foo {
display: inline-block;
overflow: hidden;
}
Fiddle
bar <span class="foo">foo</span> bar
span.foo {
display: inline-block;
text-decoration: inherit;
overflow: hidden;
}
Fiddle
Add vertical-align: top where you have display: inline-block.
This is due to the specification on overflow, which works only on block element and how line-height work.
Your outer span is by default display:inline. An inline element should not contains block elements. Although, setting it to display:block won't fix the problem.
The problem is the baseline for the text (outer element) is the same for the box of the inner element. So the box sit at the same height it should start the text (which leave a bit of white space underneat).
Anyway, it might be easier to understand with a demo.
If you set the line-height of the inner-span to lower than the text actual height, the box will conserve its size. Of course thirtydot solution is also valid.
In this example, I'm setting width:200px on form labels.
This is not being applied for some reason, and the field appears 0 width when viewed in Chrome Dev Tools.
Any idea why?
label is an inline element, like a span. It does not have width, but flows with its content. To get it to behave like a div, you would have to instruct it to act like a block-level element:
display: block
From there, you could add width:
width: 200px;
float: left;
As above, you need to get your label to behave like a block element to get it to respect your width declaration. The simplest way to do this is to set it to inline-block like this:
#form label {
width:200px;
display: inline-block;
}
Or, as #David mentions, float it left. This article describes getting this to work cross-browser.
This is because the label is an inline element so does not have a width property. To set the width you need to make it a block or inline-block element:
#form label {
display: block;
width: 200px;
}
Label is an inline element, so you cannot apply a fixed width to it (unless you change its display behavior). See here for a quick map of options/browser compatibility
http://www.quirksmode.org/css/display.html
I have links and a sprite image I want to render in one line centered vertically:
HTML:
Why Eminem is the best
<div class="sprite" id="pointer"></div>
by
<img alt="Justin meltzer" src="/system/photos/1/tiny/Justin Meltzer.jpeg?1305874692">
Justin Meltzer
How would I get all of these elements on one line?
I'd do a jsfiddle but I don't have my sprite images at a public url
Set your div to display inline-block so that everything will stay on one line. Do you want the links to then be aligned with the center of the image?
http://jsfiddle.net/gUrc9/
div.sprite { background: blue; height: 50px; width: 50px; display: inline-block; }
UPDATE:
As pointed out in comments inline-block is not supported in IE6/7 unless the element it is applied to is naturally inline. So better solution would be to change div to span.
span.sprite { display: inline-block; }
Your going to need to set your pointer div to be displayed inline:
#pointer { display: inline;}
By default div tags are block-level elements. This will force them inline with the rest of the items.
I would start with one improvement. DIVs are displayed as block, so if u r using a sprite, u wud give it a width n height anyway, in that case go for SPAN.
Now wrap a div around them and give it a style:text-align: center;. Or you could also give this outer DIV a width. and do a margin: auto;.
You'd be better off using a <span> for the pointer - a <div> is for grouping related elements - which this doesn't. It will also sit on the same line automatically, becasue a span is an inline element.
I'm trying to put some (vertically-stacked) display:block elements within a display:inline-block element. According to the CSS specification, the inline-block element should be a containing block, so it can have display:block elements within it and those should not affect the rest of the layout.
However, the display:block elements inside the display:inline-block elements disrupt the rest of the page; so does having nothing at all within the inline-block, or even a basic element like a paragraph; only simple text avoids disruption of the rest of the page (by disruption I mean shifting other divs down, e.g. in this case the left red block moves down a line and has a blank white space above it). I'm using Firefox 3.0.6.
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
}
</style></head><body>
<div id="left">Left</div><div id="right">Right</div>
</body></html>
The above shows as two panes, left red, right green, as expected. If I change "Right" to
<p>Right</p>
or remove it entirely, or (as I want to do) replace it with a couple of divs, I get the bad formatting.
Is this a Firefox bug, or am I doing something wrong, or are my expectations incorrect? (FWIW, IE 7 mangles them all equally, as if it doesn't understand inline-block; doesn't matter, this is an internal app. and I'm only using Firefox). I may be able to get the layout I want using float/margin, but I'd prefer not to have to do that.
Well display: inline-block can be a bit tricky to get cross-browser. It will require at minimum, a few hacks and, for Firefox 2, potentially an extra element.
CSS
.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }
display: -moz-inline-stack is for Firefox 2. All the immediate children will need to have display: block or otherwise be block level elements. Note if you need your inline-block element to shrink wrap I think you can use display: -moz-inline-box instead.
zoom: 1 gives hasLayout to the element (for IE 7 and below). Part 1 of the hack needed for IE7 and below compatibilty.
**display: inline* is a hack second part of the hack needed for IE7 and below compatibility.
I occasionally need to add overflow: hidden for IE compatibility as well.
For your specific situation i think what you need is:
<html><head><style type="text/css">
#left {
display: inline-block;
background: red;
width: 20%;
height: 100%;
vertical-align: top;
}
#right {
display: inline-block;
background: green;
width: 80%;
height: 100%;
vertical-align: top;
}
</style></head><body>
<div id="left">Left</div><div id="right"><p>Right</p><p>Right 2</p></div>
</body></html>
I get the bad formatting.
You are being bitten by margin collapsing, a CSS ‘cleverness’ which is a pain as often as it is a boon. The margin of the <p> collapses outwards to become a top margin on the inline-block; this then behaves as a margin would on an ‘inline’ element would, pushing the vertical-alignment of the text line out.
You can stop it happening by removing the margins from ‘p’ elements and using padding instead. Alternatively place a non-empty element with no top margin at the top of the block and one with no bottom margin at the bottom.
Is this a Firefox bug
I think possibly yes, according to the spec's:
Margins of inline-block elements do not collapse (not even with their in-flow children).
inline-block
This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.
visual rendering model