How can I control the width of a <div> with display:table; with a <p> element inside with display:table-cell

Question

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 .vc-content and therefore do not have the text vertical centered.

How can I control the width of the div?

Answer 1

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.

Answer 2

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;
}

Answer 3

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 ;) .