How to set a custom element width?

[Rabcor]

To illustrate, I have two horizontal elements, listview and imagebox:

They each take up 50% of the horizontal space.

What I want to do is make the listview take up something like 66% or 75% of the space with the imagebox taking up the remainder, i.e. a custom width for the listview, or perhaps a maximum width for the imagebox.

[DaveDavenport]

Without theme code hard to say.
I would pack the listview/image in a horizontal box. set listview to expand, and set a fixed with (in %?) on the image.

[Rabcor]

Well the relevant parts of the code currently look like this:

mainbox {
  padding : 24px;
  spacing : 24px;
  orientation:                 horizontal;
  children:                    [ "combined", "imagebox" ];
}

imagebox {
    spacing:                     0px;
    background-color:            transparent;
    background-image:            url("/home/rabcor/Pictures/snepis.png", width);
}

inputbar {
  padding          : 0px;
  spacing          : 0px;
  children         : [ entry,icon-search ];
  border           : 0 0 2px 0 solid;
  border-color     : @accent;
  border-radius    : 2px;
  background-color : @bg0;
}
combined {
  orientation:                 vertical;
  children:                    [ "listview", "inputbar" ];
}

listview {
  columns       : 1;
  spacing       : 8px;
  fixed-height  : true;
  fixed-columns : true;
}

And how to set a fixed width is exactly what I'm asking, how do I do that?

I tried using the width variable on combined and imagebox elements but the only thing width seems to work on for me is the window.

[DaveDavenport]

mainbox {
  padding : 24px;
  spacing : 24px;
  orientation:                 horizontal;
  children:                    [ "combined", "imagebox" ];
}

imagebox {
  expand: false;
  width: 40px;
    spacing:                     0px;
    background-color:            transparent;
    background-image:            url("/home/qball/Pictures/Wallpapers/37urs6dltg_Bonsai_Island_Tree.jpg", width);
}

inputbar {
  padding          : 0px;
  spacing          : 0px;
  children         : [ entry,icon-search ];
  border           : 0 0 2px 0 solid;
  border-color     : @accent;
  border-radius    : 2px;
  background-color : @bg0;
}
combined {
  orientation:                 vertical;
  children:                    [ "listview", "inputbar" ];
}

listview {
  columns       : 1;
  spacing       : 8px;
  fixed-height  : true;
  fixed-columns : true;
  expand: true;
}

[DaveDavenport]

now the image is 40px wide.

[Rabcor]

Thanks! That actually works!

The reason it didn't work for me was not having explicitly set expand: false; 👍