I have a column containing two widgets. I want to float one of the widgets to the right of the other (I couldn’t see a particular ‘official’ way to do this. Please point me in the right direction if I’m missing something). So I figured, no worries, I’ll assign each of te two widgets a class and I will create some custom CSS to handle the floating of one widget to the right of another.
The problem I ran in to is that the “Widget Class” I assigned to the widget actually ends up inside another DIV which doesn’t get the class assigned, and for this reason I was not able to make the widget float as I wanted (since it is trapped within this outer DIV and therefore the float command has no effect).
I wanted to float `.floatMe` inside `.thisContent`. The code as created by page builder is:
<div class="dive-content panel-cell-style panel-cell-style-for-w5b6cb772a5507-0-0" > <div id="panel-w5b6cb772a5507-0-0-0" class="so-panel widget widget_sow-editor panel-first-child" data-index="0" > <div class="floatMe panel-widget-style panel-widget-style-for-w5b6cb772a5507-0-0-0" > <div class="so-widget-sow-editor so-widget-sow-editor-base"> <div class="siteorigin-widget-tinymce textwidget"> The content I would like to be floated </div> </div> </div> </div> <div id="panel-w5b6cb772a5507-0-0-1" class="so-panel widget widget_sow-editor panel-last-child" data-index="1" > <div class="thisContent panel-widget-style panel-widget-style-for-w5b6cb772a5507-0-0-1" > <div class="so-widget-sow-editor so-widget-sow-editor-base"> <div class="siteorigin-widget-tinymce textwidget"> This is a larger amount of content which I would like to flow around the element I previously floated </div> </div> </div> </div> </div>
As you can see, because my css classes are trapped within the `.so-panel` DIVs I can’t really float this element in the way I’d want to. Is there any way to have the custom css class applied futher up the chain so they sit alongside each other?
As a quick and dirty fix, I used the `.panel-first-child` and `.panel-last-child` classes to actually achieve the floating I was looking for, but it’s no ideal since it only works if I have two widgets within a particular column. Therefore I’m keen to find out how I should be doing this better.
Hi Matt,
You could use a Cell Class to do this but you would likely end up doing much the same as you’re doing with the panel-first-child and panel-last-child classes. With that said, it sounds like you could do what you’re looking to do by using the Layout Builder widget. The Layout Builder widget is SiteOrigin page Builder in widget form so it allows you to add rows/columns within rows/columns.
Hm. Actually, do you have another column already added the row you’re working on? I ask because if you don’t, you should be able to accomplish what you’re trying to do by simply increasing the column count. To do this, open the row and increase the column count.