I have this code:
<div id="one">
<div id="two">my text here</div>
</div>
I have styled the div with id=two and put a box around it. The problem is that it doesn't enclose the text but instead expands to the width of the outer DIV. Is there a way I can make it just size to match the text without specifying width?
You can either
#two {
display: inline; /* or 'inline-block' */
}
Or:
#two {
float: left; /* or right */
}
display: inline; stops the div being displayed as a block-level element, causing it to collapse (for want of a better word) to the size of its contents. If you use the alternative display: inline-block then the div retains its ability to have a defined width and height, which may be required for your layout. However it's worth noting that Internet Explorer 6 and 7 only accepts display: inline-block for those elements that are 'naturally inline.'
float has much the same effect; but using float might/will obviously affect the layout of the page, and may need to be cleared by subsequent elements.
display:inline-block;
This way you keep the block behaviour of your div.
Related
I have a layout, where I have to make a vertical centeret, with a rotated text inside.
See fiddle: http://jsfiddle.net/C7mCc/3/
I use display:table; and display:table-cell; to make the vertical centering, which is working good.
The HTML
<div id="top-banner-advertising-text" class="v-center">
<p class="v-c-content">Annonce</p>
</div>
and the CSS
.v-center {
display: table;
}
.v-center .v-c-content {
display: table-cell;
vertical-align: middle;
}
But I only want the #top-banner-advertising-text to have a width of 15px. Like in this fiddle: http://jsfiddle.net/C7mCc/4/ where I have removed the .v-center and .v-c-content and therefore do not have the text vertical centered.
How can I control the width of the div?
This ended up being a lot more complicated than I expected. To control the width you must take into consideration your parent divs. There is an excellent explanation of this here:
100% height block with vertical text
Although this in order to help you out I went ahead and figured out how to switch this code up to swap the text to the other side of the img for you.
my jsfiddle:
http://jsfiddle.net/C7mCc/6/
To answer your questions, "How do I control the width".
This is done by taking the following lines in the css and making sure they match,
padding-left:2em; /* line-height of .wrapper div:first-child span */
width:2em; /* line-height of .wrapper div:first-child span */
height:2em; /* line-height of .wrapper div:first-child span */
line-height:2em; /* Copy to other locations */
Remember since your vertical now you must think about the padding left.
basically your line height padding left width and height come in to play.
We control them with em in order to make sure they are sized correctly.
Let me know if you need anymore help.
Sounds like you're looking for the not selector:
/* if it must not have the vertical centering class */
#top-banner-advertising-text:not(.v-center) {
width: 15px;
}
http://jsfiddle.net/C7mCc/5/
Alternately, you could leave the width as you have it in your 2nd example and add this:
#top-banner-advertising-text.v-center {
width: auto;
}
to set a width for an element displayed as table, you use : table-layout:fixed;
But you do not say that you want as well to rotate a text.
To rotate that text, you will need white-space:nowrap if more than one word (15px is really small).
to replace that text in middle, you will need translate(); and set that text in a container displayed as a table, so it expands over 15px and makes translate usable.
here an example with 2 version rotated 90 and -90 degres : http://codepen.io/gc-nomade/pen/JuAio.
For older IE, search for the old writing-mode http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx ;) .
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.
When a div is styled as "inline", it seems all its dimension variables lost effect.
for example
<div id="test" style=" border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
gives me a big box, but after I add inline style, the box shrink to the smallest size.
for example
<div id="test" style="display:inline; border: 1px solid;padding:3px;width:40px; height:100px;">
foobar
</div>
My question is, is there a way that I can keep the div inline (same line as some preceded text) and at the same time able to fix its size. (either div or span)
Thanks.
The width of inline elements is ignored. From my experience, in cases like this using a float will solve the issue.
You can also use inline-block, but if you have to support older browsers you may not wish to use this.
The floated div will float to the left of the the nearest block element parent (assuming this parent is also not floated). If you need more control of where the div is floating, add a wrapping (non-floated and block) div around your floated div
Use display: inline-block or (better) display: block; float: left
Use display: inline-block;
PS: inline-block is not available in some older browsers.
I often find that I want an element to adjust its width to the size of the elements it contains. inline-block acheives this. However, I do NOT want the inline part of inline-block -- i.e., I still want the next inline-block element to appear below it.
Is there a simple way to achieve this in CSS? I know I can't always but <br> tags after the element in my HTML, but that's annoying.
You can do that with two elements:
<div>
<div class="element">
content...
</div>
</div>
With the CSS rule:
.element { display: inline-block; }
Treat .element as the "real" element that you're adjusting the width of. The enclosing <div> is just there to force each element into its own inline flow.
there are many solutions, the most common one is to use float
<div class="float">
<div class="child">here is content</div>
</div>
.float{float: left;}
if you want enforce that an element is in the new line you add clear: both (or left or right, depending on your needs)
please take into account, that display: inline-block does not work in IE7. The only problem with float is when you want this div to adjust to the width of a child AND to position it at the middle of the page horizontaly
one more note, remember that overflow: hidden property is your best friend whenever you encounter any issues with floated divs :)
Here is a fiddle that achieves what you describe: http://jsfiddle.net/PhilippeVay/VwCgJ/
It uses floating elements (thus width is ajusted to content), a class on the last element you want on a line and the clear property on the next element, with the help of the adjacent selector .rightmost + span
HTML:
<p>
<span>lorem</span>
<span class="rightmost">ipsum</span>
<span>third item: below please</span>
<span>fourth and last</span>
</p>
CSS:
span {
display: block;
float: left;
padding: 20px;
background: lightblue;
border-right: 2px solid white;
}
.rightmost {
background: red;
color: white;
}
.rightmost + span {
clear: both;
}
Inline content (as for inline-block) will occupy the whole width of its container and you've to force a new line with the br element.
On the other side, floating elements can be cleared (and with adjacent selector, you can clear the element after a particular one).
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.