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.
Hi Ian,
It looks like you have an override CSS stylesheet on the ‘musical memories’ page that is setting the left and right column widths to 50% (on other pages they are set to 45%). You can see the stylesheet here with the updated styles for sidebarLeft and sidebarRight; http://www.paul-gibson.com/new/css/about-me_musical-memories_override.css
Regards,
Tim.
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?
The text and images become partially obscured on adapting to narrow browser widths.
Unfortunately, the overrides are something that get generated automatically on output, without my input so to speak. Back to square one and more head scratching!
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%.
No change to the column gutter changing from page to page alas.
To make the layout intention clearer, and to check I wasn’t using an inappropriate module, I’ve renamed the elements and classes to mirror those of the ‘twoWrapperAlt’ module. Again, no change.
I’ve archived and zipped the site and sent a link via email Caleb.
