2

I'd like to achieve the following:enter image description here

but it's bleeding from several wounds:

  • Can't close #div1 to top.
  • Can't give dinamic size (%) value to #div2, so like h3 and h4

What I can do so far: http://jsbin.com/ivemal/30/

The html code:

<ul>
  <li>
    <div id="div1"> 
      <h3> Title </h3>
      <h4> SubTitle </h4>
    </div>
    <div id="div2"> 
      ...
    </div>
  </li>
  <li> 
    ...Same...
  </li>
  ...
</ul>

I think the root cause I can't achieve this, is the rotated text. Can someone guide me, how to handle this problem?

Thanks in advance!

Pho3nixHun
  • 820
  • 2
  • 11
  • 24

2 Answers2

3

HTML

<div id="outer">
    <div id="inner"> <div>
        <h3>text</h3>
        <h4>text2</h4>
      </div>

    </div>
    <div id="inner2">Other text...</div>
</div>

I changed the span to a div because technically you cannot have block-level elements (i.e. headings) within a span.

CSS

html, body {
    margin: 0;
}
#outer {
    background: green;
}
#inner {
    background:#e3e3e3;
    height:100px;
    width:50px;
    float: left;
}
#inner > div {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    line-height: 0;
}

#inner2 {
    margin-left:70px;
    background:#e3e3e3;
}
#inner2::after {
    display: table;
    content: '';
    clear: both;
}

See jsFiddle.

rink.attendant.6
  • 44,500
  • 61
  • 101
  • 156
0

I don't know if I understood correctly, but is this what you want to obtain?

http://jsbin.com/ivemal/38/

Chinciusan Marian
  • 25
  • 5
  • Thanks, but it has the same problem as @rink.attendant.6 's answers. Try to put more text in the rotated text. It will put all text on top of each other. + It's drops the text in `#div1` under `#div2` if it's too long. http://jsbin.com/ivemal/39/ – Pho3nixHun Jul 05 '13 at 13:41