This is an update to an existing site. The example page displaying the problem at the base of this message shows the gutter between the two columns as too wide, and images in the right column butt the right edge.
Both pages are generated from the same master page, already loaded with the Backdraft code and WebYep widgets. All that changes is the page title and the content as input via WebYep. I’ve had this happen on other pages as well, and I can’t as yet see a pattern as to why some turn out correct, and others are displaying the wide gutter. As I say, all are from the same master.
Each WebYep element is set to occupy 100% of the available column width, once the left and right padding within the column is accounted for. To control the vertical spacing between WebYep elements, they have been placed in their own divs, again set to be 100% width.
I’ve tried applying floats and clears to the divs containing the WebYep elements — again no difference. Bit stuck on this one really.
Re-applying the master to any of the pages, after applying a blank master, makes no difference.
The ‘box-sizing’ action for use with Backdraft gives an option for setting the column widths as a percentage based on border, or sizing based on padding. Changing to the padding option has caused everything to work correctly.
Still confused as to why some pages worked previously and some didn’t. Perhaps resetting has just cleared some cached info or similar?
Right now, the widths of the sidebarLeft and sidebarRight elements on the problem pages are set to a fixed pixel value, obviously a problem.
Apply the Box Sizing action to the sidebarLeft and sidebarRight elements. Set it to base the size on border and convert width to a percentage. If that doesn’t work, re-upload it so I can take a look at the new source.
Ah, that’s me trying all sorts of different settings and values to see what happens. Normally they are set to a fixed percentage. I’ve changed it back Caleb and uploaded — currently both columns come out at 45%.