Is this the correct way to make a panels layout

Question

I have a 'working' panels layout that is getting the job done, but I'm unsure if it's the right way to do it.

Basically I copied the twocol_stacked layout from Panels and fitted it to my needs. The layout I'm looking for is this:

------------
|          |
|----------|
|  |       |
|  |       |
|  |-------|
|  |       |
|  |       |
------------

What shows up when in the panels lay out looks like this:

------------
|          |
|----------|
|  |       |
|  |       |
|----------|
|      |
|      |
--------

My css isn't too strong and I don't know if there is a way to make it display correctly in the panels layout window. When I put some long text in the left side, it does push the lower div to the right the way I want, it just feels incomplete/wrong.

The css is mostly copied out of the twocol_stacked.css file with a few changes:

.panel-2col-stacked {
  /*  overflow: hidden;  */
  margin-top: 0;
  padding-top: 0;
}

.panel-2col-stacked .panel-col-top {
  width: 99.9%;
  clear: both;
}

.panel-2col-stacked .panel-col-top .inside {
  margin-bottom: .5em;
}

.panel-2col-stacked .panel-col-first {
  float: left;
  width: 33%;
}
* html .panel-2col-stacked .panel-col-first {
  width: 32.9%;
}

.panel-2col-stacked .panel-col-first .inside {
  margin: 0 .5em 1em 0;
}

.panel-2col-stacked .panel-col-last,
.panel-2col-stacked .panel-col-bottom{
  float: left;
  width: 66.9%;
}

.panel-2col-stacked .panel-col-last .inside {
  margin: 0 0 1em .5em;
}

.panel-2col-stacked .panel-separator {
  margin: 0 0 1em 0;
}

Answer 1

You can use Panels to create your own layout over at /admin/structure/panels/layouts/add-flexible

This Video Tutorial covers on how to create one.

Basically, you add a column, and for each column you need to add a region. You can choose to use a flexible region or a fixed region, which you can resize by draging the grey bar.