Custom block divs are collapsing when empty

Custom block divs are collapsing when empty

by Miriam Laidlaw -
Number of replies: 4

Hi there,

I'm editing a Moodle 2 theme right now using Moodle 2.2 and viewing it through Firefox 10.

I have made four new block areas at the bottom of the page which are meant to have a width of 25% with a minimum width of 250px, as described in my CSS:

.btm-blocks {
    float: left;
    width: 25%;
    min-width: 250px;
}

My issue is that empty block areas collapse themselves.

What the areas look like when you're moving blocks around:

moving blocks

As you can see I have left the third area from the left blank.

But when I am done moving blocks, that area collapses to look like this:

div collapsed

My question is (finally), how do I stop the divs from collapsing so that any blank block areas remain the correct width? Do I have to remove the floating? If so, how else do I get them to display side-by-side?

Average of ratings: -
In reply to Miriam Laidlaw

Re: Custom block divs are collapsing when empty

by Mary Evans -

I had this problem in Aardvark Post-IT this is how I got over the problem, but mine was in a fixed area so the width values were fixed too. Anyway heres the css...

#profilebar-block1,
#profilebar-block2,
#profilebar-account,
#profilbar-mystuff {
    position: relative;
    margin: 0;
    padding: 5px;
    min-height: 150px;
    overflow: hidden;
    background: transparent;
}

div#profilebar-block1 {
    float: left;
    clear: left;
    width: 210px;
    min-height: 150px;
}
div#profilebar-block2 {
    float: left;
    margin-left: 10px;
    width: 210px;
    min-height: 150px;
}

div#profilebar-mystuff {
    float: right;
    clear: right;
    margin-left: 10px;
    width: 190px;
    min-height: 150px;
}
div#profilebar-account {
    float: left;
    margin-left: 10px;
    width: 190px;
    min-height: 150px;
}


Average of ratings: Useful (1)
In reply to Mary Evans

Re: Custom block divs are collapsing when empty

by Miriam Laidlaw -

Thanks, Mary, that was helpful.

I now have this which seems to have fixed that issue:

.btm-blocks {
    width: 25%;
    float: left;
}

#blockbtmleft {
    margin-left: 2px;
    margin-right: 2px;
    min-width: 230px;
    min-height: 1px;
}

#blockbtmmidlt {
    margin-left: 2px;
    margin-right: 2px;
    min-width: 230px;
    min-height: 1px;
}

#blockbtmmidrt {
    margin-left: 2px;
    margin-right: 2px;
    min-width: 230px;
    min-height: 1px;
}

#blockbtmright {
    margin-left: 2px;
    margin-right: 2px;
    min-width: 230px;
    min-height: 1px;
}

Fixed

However, my next problem now is that when the window is resized very small, because the blocks don't want to go less than 230px, they overlap.

Overlapping blocks

So how do I get them to stop at the minimum width and then force the sideways scroll, like the main content area?

main content

Average of ratings: -
In reply to Miriam Laidlaw

Re: Custom block divs are collapsing when empty

by Mary Evans -

This means you need to make your page min-width (4 x 230) + (padding & margins) = #page { min-width: 960px} that's if you use page as a container.

Average of ratings: -
In reply to Mary Evans

Re: Custom block divs are collapsing when empty

by Miriam Laidlaw -

Thanks, Mary. Worked that one out, too, but was hoping there was a way to just stop them from overlapping at all, like the side blocks don't overlap the central column even when the page is reduced past the point of the central column's min-width.

I guess I was just wondering how the central column did what it did. smile

Oh... wait... I think I've worked it out. And your answer is the answer for that column, too. I think my blocks sit outside the div that has the three main columns. Ah. Thanks!

(Sorry for the disconnected rambling as it finally all makes sense.)

Average of ratings: -