How to keep a rotated text centered on a dynamic height div?

Asked

Viewed 188 times

5

inserir a descrição da imagem aqui

Basically my problem is in color div, and rotated text.

I need the color div to have the minimum height relative to the size of the rotated text, and the maximum height to be relative to the external div.

Because I will have dynamic information inserted in the information box Ivs.

My problem is to make the color div have the minimum size relative to the text, and the maximum height relative to the number of Divs with information (and always stay centered). (Text needs to be rotated by CSS as the information will be inserted via database)

Follow in code example

The problem in this code that I made are the absolute positions, which make the color div not relative to external div.

Now the problem is that the div container is not relative to the min-height height of the left-panel element

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>asd</title>


    </head>
    <style>
       body {margin: 0;}

.container {
    position: relative;
    border:solid 1px black;
    width:800px;
    margin:0 0 5px 0;
}
.left-panel {
    background-color: #DDD;
    min-height: 210px;
    height: 100%;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 15px;
}

.collapse-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.chunk {
    height: 50px;
    width: 85%;
    background-color: #f2f2f2;
    float: right;
    padding-left: 10px;
    margin-bottom: 10px;
}
.clear {clear:both;}
.controler {
float:left;
height:auto;
margin-left:20px;
  margin-top:20px;  
}        

    </style>


    <body>

    <div class="controler">    
    <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>


    <div class="clear"></div>
</div>
        <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="clear"></div>
</div>
</div>
    </body>
</html>

PROBLEM SOLVING: (Thanks to Chun!)

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>asd</title>


    </head>
    <style>
       body {margin: 0;}

.container {
    position: relative;
    border:solid 1px black;
    width:800px;
    margin:0 0 5px 0;
    min-height:210px;
}
.left-panel {
    background-color: #DDD;
    min-height: 210px;
    height: 100%;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 15px;
}

.collapse-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.chunk {
    height: 50px;
    width: 85%;
    background-color: #f2f2f2;
    float: right;
    padding-left: 10px;
    margin-bottom: 10px;
}
.clear {clear:both;}
.controler {

    float:left;
    margin:20px 0 0 20px;
    height:auto;
    border:solid 1px red;
}

    </style>


    <body>

    <div class="controler">    
    <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>


    <div class="clear"></div>

        </div>

        <div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="clear"></div>
</div>
        </div>
    </body>
</html>
html css html5 css3

1 answer

4


You can do it this way:

body {margin: 0;}

.container {
    position: relative;
}
.left-panel {
    background-color: #DDD;
    min-height: 110px;
    height: 100%;
    width: 40px;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0 15px;
}

.collapse-pane {
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
    transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
}

.chunk {
    height: 50px;
    width: 85%;
    background-color: #f2f2f2;
    float: right;
    padding-left: 10px;
    margin-bottom: 10px;
}
.clear {clear:both;}
<div class="container">
    <div class="left-panel">
        <div class="collapse-pane">OBSERVÇÃO</div>
    </div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="chunk">Bloco de texto</div>
    <div class="clear"></div>
</div>

Increases or decreases the number of elements: <div class="chunk">Bloco de texto</div> so you can see the side panel adapting to the height of the main content.

Here’s an example in jsFiddle if you prefer: http://jsfiddle.net/k73co4kw/

  • I didn’t understand, but I rewrote the code demonstrating the problem, and with the Divs named as the image

  • I edited my reply @luisaddor, check out the jsFiddle online example to see if this is what you wanted.

  • perfect, thank you very much! Now is to test on JSF Prime faces to see if you get all this hahahaha!

  • Man, it didn’t really happen. Because when I take out the Chunk elemntos, the container height is not relative to the size of the left-panel element, I will edit the code with the example of my test

  • 1

    @luisaddor adds a min-height equal to the class of the side panel for the .container. For example:.container{ min-height: 210px;}.

  • 1

    truth, had just done would come auqi comment, it worked yes, thank you very much!

Show 1 more comment

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.