Attached image causes main content div to clear below the RH sidebar (sidebar last)

Attached image causes main content div to clear below the RH sidebar (sidebar last)

7 posts / 0 new
Last post
gpk's picture
drupal
Points: 10
Attached image causes main content div to clear below the RH sidebar (sidebar last)

Probably best just to link to the site: www.shw.org.uk

The top 2 posts are each a single block in the content-top region (generated by Views).

As you can see below this, the main content (div.content-inner) has dropped below the RH sidebar (div.sidebar-last) containing a single block.

If I remove the image (which was added with image attach) from the top post then the main content moves up and correctly wraps round the RH block/sidebar.

??
!

TIA for any suggests.

Status: 
Resolved
Joshua Brauer's picture
joshua
Points: 0

Hi Giles,

This is a result of a CSS change made by the imageattach module. Specifically it adds the image_attach.css file to the page. That file contains the following styling to prevent a node from wrapping around a picture that extends beyond the bottom of the previous node in the list:

.node {
  clear: both;
}

You could create a sub-theme that adds an additional style-sheet and contains the following directive:

.node {
  clear: none;
}

Thanks,
Josh
Acquia Technical Assistance Center

[Edit: Changed incorrect css per next comment.]

Thanks,
Josh
Acquia Client Advisory Team

gpk's picture
drupal
Points: 10

Great, that's the tip I was looking for! BTW for others who may be interested, the new directive should be

.node {
clear: none;
}

There are one or two issues getting a subtheme to work nicely, I'll open a separate topic for that.

Many thanks

Zdean's picture
z
Points: 0

Josh.

I'm having the same problem with Fivestar:

http://wholevillage.com/content/mulberry

and PanelPages:

http://wholevillage.com/ (if you select the Recent Blogs tab, you'll notice that the content below that portion of the PanelPage does not shift up).

Is the cause of the problem here the same thing? I tried to figure out some place where I could make the css change you advised, but no luck.

You can access the site with:

username: test
pw: test

Thanks for your help.

**UPDATE**

I changed the following css:

}
.clear-block {
display: none;
}

to

}
.clear-block {
display: inline;
}

I found this in the modules/system/default.css file

This fixed the homepage, but I still can't get the page with the Fivestar rating to show up correctly.

**UPDATE**

I added:

#content-inner
display:-moz-grid;
}

Again, not sure if it's the right thing to do, but it seems to have fixed the problem for the Fivestar widget in column 2.

Joshua Brauer's picture
joshua
Points: 0

Hi,

This is the right concept, i.e. overriding the CSS.

As a best practice you would want to do this in a CSS file that won't be overwritten by the next update of Acquia Drupal.

The basic process for doing this sort of override with a subtheme is covered in http://acquia.com/blog/s-files-customizing-theme-sub-theme

Thanks,
Josh
Acquia Technical Assistance Center

Thanks,
Josh
Acquia Client Advisory Team

Zdean's picture
z
Points: 0

Josh...If I've already made a lot of changes to the CSS, is it still practical to use sub-themes or do I need to start from scratch in order to utilize sub-themes?

Thanks.

Brenda Boggs's picture
brenda.boggs
Points: 0

It's definitely still practical. Even if you moved the entire CSS to a subtheme, it should still take precedence over any other CSS, and will definitely help when upgrading your Acquia Drupal installation so that you don't override any files accidentally.

Brenda Boggs
Acquia Technical Assistance Center

Brenda Boggs
Acquia Client Advisory Team