ZK layout issue

Question

I have issue with making below layout. Please provide me some code example how to create below layout. As the screenshot depict I need two part equally sized. Left part containing the latin text and right side the radio buttons and rest. The "From" teksts should be left aligned and the amounts and icons should be right alligned. How do I construct this layout best way in ZK and in ZK way ?

Screenshot Example

Answer 1

You can see below code for demo purpose and adjust component according to your requirments

<zk>
  <window border="normal" title="hello" apply="pkg$.TestComposer" width="100%" height="100%">
    <hbox heights="40%,20%,40%"  width="100%" height="100%">
          <borderlayout width="100%" height="100%">

            <center>
               Here is My Content
            </center>

          </borderlayout>
          <borderlayout width="100%" height="100%">
             <center>
            <vbox widths="30%,30%,30%"  width="100%" height="100%">
              <checkbox />
              <checkbox />
               <checkbox />
               </vbox>
          </center>
          </borderlayout>
    <splitter width="100%"/>
          <borderlayout width="100%" height="100%">
            <center>
            <vbox widths="30%,30%,30%"  width="100%" height="100%">
              <label value = "hariom123"/>
               <label value = "hariom123"/>
               <label value = "hariom123"/>
              </vbox>
            </center>
          </borderlayout>
    </hbox>
  </window>
</zk>

You can run above code in Zk Fiddle

Answer 2

It kills me to respond to this answer given the level of detail you provided. In the future please do post some code showing what you've tried and why it doesn't work. With that, we can quickly get you back on track. Your question here is just fishing for code =/

<hlayout hflex="1">
    <!--
        size/flex on labels doesn't work, wrap label in a div to control size
    -->
    <div hflex="1">
        <label value="lorem ipsum.."/>
    </div>
    <grid hflex="1">
        <columns>
            <!--
                Last column is small, first two share available space.
            -->
            <column>
            <column>
            <column width="30px">
        </columns>
        <rows>
            <row>
                <radio label="This is a radio button"/>
                <label value="From: 100,00 $"/>
                <image src="info.png"/>
            <row>
            <row>
                <radio label="This is a radio button 2"/>
                <label value="From: 200,00 $"/>
                <image src="info.png"/>
            <row>
            <row>
                <radio label="This is a radio button 3"/>
                <label value="0,00 $"/>
                <image src="info.png"/>
            <row>
        </rows>
    </grid>
</hlayout>

There are many other ways to get this layout. I chose a grid next to a div so the radio buttons, labels, and icons on the right are guaranteed to line up. You have other options though.

PS: of course you will need to apply CSS to make the ZK grid less gaudy.