Css rotate div creates white space on top

Question

I have a div that I rotate from vertical to horizontal. The problem is that when I rotate it creates big space at the top. I want when rotate the div be stacked on the top. How can I achieve this the image size that I have as background is width 756 x height 1250

.body
{
    width:756px;
    min-height:1250px;
    border-color:White;
    border-style:solid;
    border-width:thin;
    float:right;
    margin:0 auto;
    background-image:url("Images/bg.jpg");
    background-repeat:no-repeat;
      -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);

}

<div class="body">
<div >
<div ><h2 style="font-size:20px;"><div style="width:540px; margin-top:520px; margin-left:110px;   ">
     <asp:Label ID="lblNtitle" runat="server" 
         Text="" style="color: #000000" CssClass="style3"></asp:Label><br /><br /> 
     <asp:Label ID="lblNCompany" runat="server" Text="" CssClass="style3"> </asp:Label></div></h2></div>

So what is it you want to achieve? Do you want `.body` to rotate from the top-left corner? Or something else? — Nahydrin, Jun 04 '13 at 16:30
I want rotate 90deg the div class body, and be on the top of the page. Without any space on the top — focus, Jun 04 '13 at 16:36
have you tried to use transform-origin: center; .. do you know its purpose and use ? — G-Cyrillus, Jun 04 '13 at 17:53
I didn know what about this site. this is the link: http://jsfiddle.net/jMEs3/ — focus, Jun 04 '13 at 18:35
Thank you! The origin variables was the problem. Please post your answer to check that you are correct — focus, Jun 04 '13 at 19:17

score 0 · Answer 1 · answered Jun 05 '13 at 12:17

From what I can gather you needed to switch the min-height and the width values because the div is now rotated vertically rather than horizontal. That takes care of the white space towards the top of the page. Here is an example http://jsfiddle.net/fDWkr/1/

Change

width:756px;
min-height:1250px;

To

width:1250px;
min-height:756px;

Css rotate div creates white space on top

1 Answers1

Linked