HTML: How to create a scalable layout with elements glued to the edges

Question

I am trying to do something like this:

  :                                                  :
..:..................................................:..
  :B               <center>B</center>               B:
  :                                                  :
  :   Sed et velit sit amet eros pulvinar auctor.    :
  :   Integer tristique facilisis velit, vitae       :
  :   rhoncus neque auctor sit amet. Ut              :
  :   condimentum porta ipsum, eu luctus quam        :
  :B  tincidunt ut. Sed id dolor eros. Aenean       B:
  :   semper volutpat leo, vel euismod tellus        :
  :   feugiat vitae. Aenean varius, ipsum eu         :
  :   fringilla tincidunt, leo nunc feugiat          :
  :   neque, vitae imperdiet sapien orci ut ipsum.   :
  :                                                  :
  :B               <center>B</center>               B:
..:..................................................:..
  :                                                  :

The B's are small buttons, not identical but very similar in size.

I want to put this inside an Ext.Window which is resizable, and thus it needs to be able to scale accordingly. The UI feeling should be that the buttons are glued to the sides of the window frame - thus the window appears as a normal Ext.Window with buttons at the edges.

I have tried doing this using <div>'s combined with relative and absolute positioning, float'ing and the four left, right, bottom and top positioning.

But my combinations so far haven't done the trick.

Answer 1

You should take a look at the anchor and hbox layout.

I think it would a little be tricky but if you use more than one panel it should be possible

A possibility would be to use the hbox layout and make 3 panels

The window would have a anchor layout, so you can make the three subpanel resize depending on the window. The subpanel would have hbox layout and the central cell with the flex:1.

You should take a loot at the layout manager and try to combine the layouts to make what you need.

make something like this

++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ +                  HBOX layout panel 1                           + +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ +                  HBOX layout panel 1                           + +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
+ +                  HBOX layout panel 2                           + +
+ ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ +
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

In JavaScript it would give:

{
    anchor: '100% 5%'
    layout: 'hbox'
    items:[ 
        {
           html: 'button',
           width: 50,
        },
        {
          html: 'button 2',
          flex: 1
        },
        {   
          html: 'button 3'.
          width: 50
        }
    ]
},{
    anchor: '100% 90%'
    layout: 'hbox'
    items:[ 
        {
           html: 'button',
           width: 50,
        },
        {
          html: 'lorem ipsu some text',
          flex: 1
        },
        {   
          html: 'button 3'.
          width: 50
        }
    ]
},{
    anchor: '100% 5%'
    layout: 'hbox'
    items:[ 
        {
           html: 'button',
           width: 50,
        },
        {
          html: 'button 2',
          flex: 1
        },
        {   
          html: 'button 3'.
          width: 50
        }
    ]
}

Good luck!