CSS transform

HTML & CSS
1

I have a layout that has a 11 col slider (bootstrap grid) and a 1 column on the right. On the right they want a navigation menu as well, I have tried text transform and would like a background but cannot get the back ground to grow in height, i am at a loss.

<div class="col-md-1 right-nav">
                <div class="right-nav">
                    <p class="side-nav">Membership</p>
                </div>
                <%--                <ul>
                    <li class="side-nav"><span>Membership</span></li>
                    <li class="side-nav"><span >Training</span></li>
                    <li class="side-nav"><span >Group</span></li>
                    <li class="side-nav"><span >Services</span></li>
                    <li class="side-nav"><span >Insurance</span></li>
                </ul>--%>
            </div>

I would like a background all round

/* SIDE NAV  */
.right-nav p {
    background: url("/images/sidebartest.jpg") repeat-y ;
    /*background-color: rgb(0, 83, 159);*/
    padding: 3px 3px 3px 3px;
}
.side-nav{
    transform: rotate(90deg);
    transform-origin: left top 1px;
}

Any suggestions please.

2

On .right-nav element you want the background on that? But there isn’t one? Whatever parent you are trying to get, try giving it overflow:hidden;. I need to see more code but it’s possible you haven’t contained your floats. Very ltitle code to go off of though.