Rotated text spills out of browser window

StackOverflow https://stackoverflow.com/questions/20938822

Question

I'm having problems with a rotated header inside a fluid-layout website : I'd like to have this header to adjust according to the height of the browser window. However, right now, when I'm resizing the window, the top of the text spills out and is hidden.

I figured out that it might have to do with the viewport and the new "mobile-first" approach of Bootstrap 3, but I'm really flying blind otherwise. Also, applying overflow : hidden property, without success.

Here's the HTML :

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/stylesheet.css" rel="stylesheet">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>

    <div class="container">
        <div class="row">
            <header>
                <h1>Welcome to Yd Design</h1>
            </header>
        </div>
    </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

And the CSS :

@import "bootstrap.min.css";

html {
    min-height: 100%;
    min-width: 100%;
    position: relative;
}

body {
    height: 100%;
    width: 100%;
}

header {
    position: absolute;
    bottom: 0;
    left: 0;

    -moz-transform-origin : 0 0;
    -webkit-transform-origin : 0 0;
    -ms-transform-origin : 0 0;
    -o-transform-origin : 0 0;
    transform-origin: 0 0;

    -moz-transform : rotate(-90deg);
    -webkit-transform : rotate(-90deg);
    -ms-transform : rotate(-90deg);
    -o-transform : rotate(-90deg);
    transform: rotate(-90deg);
}

h1 {
    font-size: 5.6em;
    font-weight: bolder;
}

Thank you in advance for your answers!

Edit :

As requested, I added a JSFiddle. I also added the browser specific prefixes for compatibility.

http://jsfiddle.net/smpte11/v6s9H/

Was it helpful?

Solution

This worked for me:

  1. For the container that's rotated (in this case, <header>), set its width to a value, like 500px.
  2. Then, set the parent container's margin-top to the same value (500px).

For a full example, I modified your fiddle: http://jsfiddle.net/v6s9H/3/

Extra notes:

For a dynamic width, it would take more work. I would suggest rotating the parent container and positioning it, then doing a float:right on the header with no set width on the header but instead on one of the parent containers. In short, you could do a dynamic width by experimenting with more nested div's.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top