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

Question

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

Navigation

#1 by (4 votes)

5

Basicallymyproblemisinthecolordiv,andinrotatedtext.

Ineedthedivofthecolor,hastheminimumheightrelativetothesizeoftherotatedtext,andthatthemaximumheightisrelativetotheexternaldiv.

Iwillhavedynamicinformationinsertedintotheinformationboxdivs.

Myproblemistomakethecolordivhavetheminimumsizerelativetothetext,andthemaximumheightrelativetothenumberofDivswithinformation(andalwaysstaycentralized).(ThetextneedstoberotatedbyCssbecausetheinformationwillbeenteredviathedatabase)

Followthecodeexample

TheprobleminthiscodeImadeisabsoluteplacements,whichmakethedivofcolornotrelativetoexternaldiv.

Nowtheproblemisthatthecontainerdivisnotrelativetotheheightoftheleft-panelelement'smin-height

<!DOCTYPEhtml><html><head><metacharset="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: (Worth @ Chun by force!)

<!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 html5 css css3

asked by anonymous 21.10.2015 / 12:32

1 answer

How to know the name of an image with JS? Change between branchs in the GIT and changes keep in the current branch

score 4 · Accepted Answer

You can do this as follows:

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> to see the side panel adjust to the height of the main content.

Here's an example in jsFiddle if you prefer: link