-1

it sounds funny but I have problems to find an elegant solution to create a certain layout and hope to find here some hints from other users.

I want to create this layout:

enter image description here

These are the requirments:

the whole component has a certain width. the component with a and b have a certain width, e.g. 200px. c gets the remaining space for its width. c defines a certain height. a and b together should have the same height like c. a has a certain height, but its unknown. it is calulcated in the end and can't be used for calculations because it can change. but after the rendering it has a certain height. b should use the remaining space for its height, e.g. height of c - height of a. in the end b can be larger than the available space, so it should use the scrolling-y function. you should see a scrollbar if the component becomes bigger than the available height.

I tried different approaches, e.g. floating, tables, but there are always force me to set a certain height for b.

I would be glad if someone could give an advice for a proper solution.

Edit:

My approach with the tables: http://jsfiddle.net/f7c6dzfL/

.test {
  border: 1px solid red;
  height: 400px;
  display: table;
  width: 100%;
}
.test .left {
  display: table-cell;
  border: 1px solid red;
  width: 50%;
}
.test .left .top {
  border: 1px solid blue;
  width: 100%;
  height: 100px;
}
.test .left .bottom {
  border: 1px solid blue;
  width: 100%;
  max-height: 100%;
  overflow-y: scroll;
}
.test .right {
  display: table-cell;
  width: 50%;
}
<div class="test">
  <div class="left">
    <div class="top"></div>
    <div class="bottom">
      <ul>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
        <li>asd</li>
      </ul>
    </div>
  </div>
  <div class="right"></div>
</div>
Sumner Evans
  • 8,951
  • 5
  • 30
  • 47
Rudolf Schmidt
  • 2,345
  • 5
  • 21
  • 28

1 Answers1

0

Here is a working example:

.container {
  width: 100%;
  position: absolute;
}
.container .left {
  width: 300px;
  float: left;
  border: 1px solid red;
  height: 100%;
  position: absolute;
  display: flex;
  flex-flow: column;
}
.container .left .top {
  height: 100px;
  border: 2px solid black;
  flex: 0 1 auto;
}
.container .left .bottom {
  border: 2px solid blue;
  flex: 1 1 auto;
}
.container .right {
  margin-left: 300px;
  border: 1px solid green;
  height: 100%;
}
<div class="container">
  <div class="left">
    <div class="top">My content</div>
    <div class="bottom">My content is very long in this section.
      <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
        <li>Foo</li>
        <li>Bar</li>
        <li>Baz</li>
      </ul>
    </div>
  </div>
  <div class="right">
    <p>This is the content on the right</p>
    <p>My content is very long in this section.</p>
    <ul>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
      <li>Foo</li>
      <li>Bar</li>
      <li>Baz</li>
    </ul>
    <p>This div defines the height of the entire container class.</p>
    <p>Lacus felis. Donec velit. Purus metus. Massa magna interdum vestibulum hymenaeos ipsum penatibus luctus a interdum sit orci. Vitae augue. Felis donec. Porta augue. Metus risus pulvinar vestibulum consequat etiam leo eros ac. Class massa laoreet nunc
      tristique auctor mollis. Curae proin. Morbi metus iaculis dictumst.</p>
  </div>
</div>

Note on browser compatibility: According to CanIUse.com, display: flex, flex-flow: column, and flex are supported by all current versions of modern browsers (including IE 11). If you need support for IE 8 or IE 9, however, you will not be able to use this solution. If you need to support IE 10, you need to use the -ms- prefix.

Credits:

I used these questions to help formulate my answer:

Community
  • 1
  • 1
Sumner Evans
  • 8,951
  • 5
  • 30
  • 47
  • I forgot to mention, I know that it would be possible to create it with flex, but the problem with flex is, that the crap apple software does not support it well so you need to use nesty vendor prefixes, but in the future it will be the standard. Is there another modern and standard way supported by all software vendors today? – Rudolf Schmidt May 20 '15 at 01:41
  • 1
    `flex` is the modern way of doing this. You could always try using a `table`, but that's probably not the way you want to go. If you use [Compass SCSS](http://compass-style.org/) to compile your CSS, you can have it add vendor prefixes for you. Otherwise, you'll have to just use vendor prefixes. – Sumner Evans May 20 '15 at 01:52
  • I think you are right, flex is the solution. I need to find a proper solution to let run a autoprefix tool for my less middleware. I create a seperate post. – Rudolf Schmidt May 20 '15 at 02:02
  • I took a look at compass. Correct me if I say something wrong, but my first impression is that compass just offer some mixins for the vendor stuff. Where is the benefit if I write the same mixins for my needs like flex functions? My first impression was that can regnozised certain commands by it self and translate it with prefixes. – Rudolf Schmidt May 20 '15 at 02:23
  • Just Google "vendor prefix mixin compass", you'll find something that works for you. Here are a few links I found: http://www.stefanwienert.de/blog/2012/05/18/easy-css-vendor-prefix-mixin-for-sass/, and http://compass-style.org/reference/compass/helpers/cross-browser/. – Sumner Evans May 20 '15 at 02:27