CSS rotated text and div placement issues - html

Question

I'm trying to place rotated text in a div next to another div, which is "fixed" to the right-side of the browser window. The structure I'm aiming for is this:
However, I'm having complications rotating the text and getting the positioning correct. Here is what I've tried:
HTML Markup
<div id='feedbackslider'>
<div class='feedback-title'>
<i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
</div>
<div class='feedback-list'>
<ul>
<li>Ask a Question</li>
<li>Give Praise</li>
<li>Share an Idea</li>
<li>Report a Problem</li>
</u
</div>
</div>
CSS:
#feedbackslider {
background-color: #fff;
position: fixed;
right: -25px;
padding: 0;
top: 50%;
z-index: 9999;
}
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: relative;
z-index: 9999;
right: 75px;
}
#feedbackslider:hover .feedback-title {
/*color: #fff;*/
}
#feedbackslider .feedback-list {
border: solid 1px red;
float: right;
}
#feedbackslider .feedback-list ul {
width: 150px;
padding: 0;
list-style: none;
margin: 0;
}
And here's how my attempt looks:
It's getting close, but I would like the list (red border) flush against the top of the main container, and I'd also like "feedback" to occupy it's own space to the left of the list but still within the container.
There might be an easier way of doing this, but I'm not sure.
Any assistance would be greatly appreciated! I can provide clarification if needed :)

Answer 1

If you are trying to have the title in the middle even if the content grows, you can try this
HTML
<div id='feedbackslider'>
<div class='feedback-title'>
<span> <!--Added this span-->
<i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
</span>
</div>
<div class='feedback-list'>
<ul>
<li>Ask a Question</li>
<li>Give Praise</li>
<li>Share an Idea</li>
<li>Report a Problem</li>
</u
</div>
</div>
CSS
#feedbackslider {
background-color: #fff;
padding: 0;
position: fixed;
right: -25px;
top: 50%;
z-index: 9999;
display: table; /*Added this*/
border-spacing: 10px; /*change this spacing according to your need*/
}
/*added this css for title*/
.feedback-title {
display: table-cell;
width: 20px;
margin-right: 5px;
height: 100%;
border: 1px solid #ccc
}
/*added this css for inner span*/
.feedback-title span {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
left: -19px;
margin-top: -10px;
position: absolute;
text-align: center;
top: 50%;
width: 78px;
z-index: 9999;
}
#feedbackslider:hover .feedback-title {
/*color: #fff;*/
}
#feedbackslider .feedback-list {
border: solid 1px red;
display: table-cell; /Added this/
}
#feedbackslider .feedback-list ul {
width: 150px;
padding: 0;
list-style: none;
margin: 0;
}

Answer 2

Here is some modification to your css.
http://jsfiddle.net/hv4neuf3/
#feedbackslider {
background-color: #fff;
position: fixed;
right: 0;
padding: 0;
top: 50%;
z-index: 9999;
}
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position: relative;
z-index: 9999;
right: 90px;
top: 85px;
text-align: center;
font-size: 20px;
border: 1px solid #000;
}
#feedbackslider:hover .feedback-title {
color: #fff;
}
#feedbackslider .feedback-list {
border: solid 1px #000;
float: right;
}
#feedbackslider .feedback-list ul {
width: 140px;
padding: 0;
list-style: none;
margin: 0;
}
#feedbackslider li{
padding: 9px 5px;
}

Answer 3

Try This
UPDATED CSS
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
z-index: 9999;
/*Add This CSS*/
left: -54px;
margin-top: -10px;
position: absolute;
text-align: center;
top: 50%;
width: 78px;
}

Answer 4

Try this and let me know if its close enough.
CSS:
#feedbackslider {
background-color: #fff;
position: fixed;
right: -25px;
padding: 0;
top: 50%;
z-index: 9999;
}
.feedback-title {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
z-index: 9999;
float:left;
margin-top:20px;
margin-right:-20px;
}
#feedbackslider:hover .feedback-title {
/*color: #fff;*/
}
#feedbackslider .feedback-list {
border: solid 1px red;
float: left;
padding:10px;
}
#feedbackslider .feedback-list ul {
width: 150px;
padding: 0;
list-style: none;
margin: 0;
}
HTML:
<div id='feedbackslider'>
<div class='feedback-title'>
<i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
</div>
<div class='feedback-list'>
<ul>
<li>Ask a Question</li>
<li>Give Praise</li>
<li>Share an Idea</li>
<li>Report a Problem</li>
</ul>
</div>
</div>