Position of multiple widget in page

Hi,
if bootstrap is included in your template. you can use cols classes . i.e

<div class="row">
<div class="col-sm-4"><?php dynamic_sidebar( 'widget-1' ) ?> </div>
<div class="col-sm-4"><?php dynamic_sidebar( 'widget-2' ) ?> </div>
<div class="col-sm-4"><?php dynamic_sidebar( 'widget-3' ) ?> </div>
</div>

if you are not using bootstrap. you may need to add few css lines to display it ad column.

<div class="row">
<div class="col-one-third"><?php dynamic_sidebar( 'widget-1' ) ?> </div>
<div class="col-one-third"><?php dynamic_sidebar( 'widget-2' ) ?> </div>
<div class="col-one-third"><?php dynamic_sidebar( 'widget-3' ) ?> </div>
</div>

<style>
.col-one-third{
 float: left;
 width: 33.33%;
}
</style>

hope this helps.

Thanks,
Kishor

Dear Kishor thanks for your reply.
The plugin was really fantastic !
I’ve tried to put the code in the style.css of my theme but don’t work.
Obviously I’ve replace the
<div class=”col-one-third”><?php dynamic_sidebar( ‘widget-1’ ) ?> </div>
with
<div class=”col-one-third”><?php dynamic_sidebar( ‘ultimo-quadro’ ) ?> </div>

What can I attempt to do ?
Thank you very mauch again
Mao

P.s. my theme was: Grey Whale

not sure if you are trying to do that in template using
<?php dynamic_sidebar(...); ?>
or just using
[cwa id='test']
in editor. if you mean horizontally arrange multiple widget area, above code should work. if you mean to horizontally arrange widgets inside single widget area. following example may be helpful.
using shortcode in editor:

<div class="test-widget">
[cwa id='test']
<div>

using dynamic_sidebar in template:

<div class="test-widget">
<?php dynamic_sidebar('test');  ?>
</div>

css for both:

<style>
.test-widget .widget{
float: left;
width: 'as required by deisng';
}
</style>

Thanks!
Kishor

Dear Kishor, first thanks to you.
I’m a bit confused ??
Here the site: https://181.224.143.173/~esterneg/
I think that I ‘ve a multiple widget area in a home page (not single area)
that I manage with your CWA plugin.
I’ve the home page with text and adding three short-code like:
[cwa id=’widget-sx’]
[cwa id=’widget-dx’]
[cwa id=’ultimo-quadro’]

I’ve tried to put a combination of yor above suggested code, but they don’t work.
Thanks again for your patient.
Mao

Hi, following code may help to fix your problem.
wrap those widget area inside div. i’e

<div class="rpwe_widget_container">
  [cwa id='widget-sx']
  [cwa id='widget-dx']
  [cwa id='ultimo-quadro']
</div>

then add following css to your style.css

<style>
.rpwe_widget_container .widget{
 float: left;
 width: 'as required by desing';
}
</style>

this should fix it.

Thanks!
Kishor

Thank you Kishor !
Where I put the first part ?
<div class=”rpwe_widget_container”>
[cwa id=’widget-sx’]
[cwa id=’widget-dx’]
[cwa id=’ultimo-quadro’]
</div>
I’ve tried to put in the contents of the home page but the result is strange…
Many thanks
Mao

The widget was expanded orizontally but one above the other…
I need to place the widget one beside the other

Thank you very very much

HI Mao, please follow following steps:

1. https://screencast.com/t/aYupyzVcDAd

<div class="rpwe_widget_container">
  <div class="col-3">[cwa id='widget-sx']</div>
  <div class="col-3">[cwa id='widget-dx']</div>
  <div class="col-3">[cwa id='ultimo-quadro']</div>
</div>

2. https://screencast.com/t/iFCULpxN

.rpwe_widget_container .col-3{
  float: left;
  margin: 0 10px;
  width: 30%;
}

3. final output should look like: https://screencast.com/t/O6u8V08Ld

Hope this helps to fix your problem.

Thanks,
Kishor

YEEEEEEEESSSSSSSSSSS !!!!
Kishor you are FANTASTIC
Work perfectly. That’s the right solution.
Many many thanks.
I wish you a sunny days
Maurizio