Content getting 'stuck' under floated div... Can't work this out!

Hi there,

I’m working on a basic site for a friend - it’s powered by Wordpress and I’m currently trying to code the layout but I’m having problems.

Example: http://www.carolinekernick.co.uk/?page_id=8

For some reason the gallery images are getting ‘stuck’ underneath the navigation bar on the left, even though they’re nowhere near it and the container div goes up as far as the sidebar’s start. I can’t figure this out for the life of me, I’ve been trying too many hours now considering this is mostly a favour for a friend!

Would appreciate if any of you guys could provide an answer to this, sometimes all it takes it a fresh pair of eyes!

The stylesheet can be found here (ignore the stylesheet header information, I’ve just developed my custom theme from the default Wordpress theme): http://www.carolinekernick.co.uk/wp-content/themes/default/style.css but if you need any more information, please ask.

Thanks

  • Roo

Is this happening in a particular browser? I can’t see anything wrong in firefox.

Hi,
You have set clear:both on the .ngg-galleryoverview div.
That has caused it to clear (drop below) the floated sidebar, remove it and all is well.


.ngg-galleryoverview {
    overflow: hidden;
    margin-top: 10px;
    width: 100%;
    [COLOR=Red]/*clear:both; remove this*/[/COLOR]
    display:block !important;
}

Ah, well done Rayzur. I didn’t understand the question. (Will have to read more carefully in future.)

Amazing, it would’ve taken me ages to spot that, thanks for your solution Rayzur and thanks for taking the time to look ralph.m!

  • Roo

For some reason the gallery images are getting ‘stuck’ underneath the navigation bar on the left, even though they’re nowhere near it and the container div goes up as far as the sidebar’s start.

Hi Ralph,
No worries, it just took a little digging around with firebug. :slight_smile:

As the OP mentioned, the parent div (.narrowcolumn .entry) was sitting at the same level as the floated sidebar. A test border showed what was going on with it.

[B].narrowcolumn .entry[/B], .widecolumn .entry {
    line-height: 1.4em;
    [COLOR=Red]border:1px solid red;[/COLOR]/*test only*/
    }

Got ya :slight_smile: thanks, I’ll try not to make the same mistake in future!