Escribir verticalmente y que ocupe el 100% del div

[madman_18]

Hola a todos!

Tengo un bloque el cual el height me va aumentando, no es fijo...ahora, tengo su título de la caja está escrito de forma vertical pero no consigo hacer que si el div por ejemplo me mida 200px, el título también me mida 200px, no sé como hacerlo ¬¬

Os pongo el código y la estructura por si veis si falla algo:

Código HTML:

<section class="bloque-recomendamos" id="sugerencias">
            
            <article class="titulo-recomendamos">
                <p style="height:100%;">Recomendamos</p>
            </article>
            <aside class="recomendamos">
                <ul>
                    <li>
                        <p class="tituloProducto-recomendamos">Lata Aceite 5L.</p>                        
                        <img src="imagenes/aside/lata.png"/>
                        <p class="segProducto-recomendamos">Garrafa de aceite presentada en un c&oacute;modo envase en lata con capacidad de 5L.</p>
                    </li>
                    <li>
                        <p class="tituloProducto-recomendamos">Lata Aceite 5L.</p>                        
                        <img src="imagenes/aside/lata.png"/>
                        <p class="segProducto-recomendamos">Garrafa de aceite presentada en un c&oacute;modo envase en lata con capacidad de 5L.</p>
                    </li>
                    
                </ul>
            </aside>
            <div class="limpia"></div>  
</section>
 

Código CSS:

section.bloque-recomendamos{
    width:250px;
    height:auto;
    position:fixed;
    top:50%;
    left: -226px;
    margin-top: -125px;
    /*background:#F2F2F2;*/
    border-left: 2px solid #A5942A;
    border-top: 2px solid #A5942A;
    border-bottom: 2px solid #A5942A;
    border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -o-border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
        -moz-border-bottom-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -o-border-bottom-right-radius: 10px;
    
}
article.titulo-recomendamos{
    width:16px;
    height:100%;
    float:right;
    font-size: 16px;
    word-wrap: break-word;
    color:#F2F2F2;
    background: #A5942A;
    margin:0 auto;
    text-align:center;
    padding: 5px;
    cursor:pointer;
    border-top-right-radius: 10px;
        -moz-border-top-right-radius: 10px;
        -webkit-border-top-right-radius: 10px;
        -o-border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
        -moz-border-bottom-right-radius: 10px;
        -webkit-border-bottom-right-radius: 10px;
        -o-border-bottom-right-radius: 10px;
}
 
aside.recomendamos{
    width:85%;
    float:left;
    padding: 5px 1.5%;
}
 

[pzin]

En principio no puede hacerse con CSS de forma automática. Tendrás que, al menos, usar JavaScript y luego calcular el letter-spacing a asignar, aunque no es cosa fácil. Hay cosas hechas por ahí.

Yo intentaría centrar el texto. O no. La gente está muy hecha a que un título no cubra todo. Nunca te va a quedar a feo vaya. Es una opinión personal.

Por cierto, según caniuse, desde hace tiempo que no existe realmente necesidad de usar prefijos propietarios para border-radius.

Podrías cambiar todo eso por un simple:

Código CSS:

border-radius: 10px
 

[madman_18]

Iniciado por pzin

En principio no puede hacerse con CSS de forma automática. Tendrás que, al menos, usar JavaScript y luego calcular el letter-spacing a asignar, aunque no es cosa fácil. Hay cosas hechas por ahí.

Yo intentaría centrar el texto. O no. La gente está muy hecha a que un título no cubra todo. Nunca te va a quedar a feo vaya. Es una opinión personal.

Por cierto, según caniuse, desde hace tiempo que no existe realmente necesidad de usar prefijos propietarios para border-radius.

Podrías cambiar todo eso por un simple:

Código CSS:

border-radius: 10px
 

gracias por la ayuda pzin, no sabía lo del border-radius...y a ver si doy con algo para lo del título. Tampoco es que sea muy muy "importante", pero ya es por querer hacerlo