By new123456789 on

I am using a bartik theme and have got a couple of blocks in the footer. One floated to the left, and another to the right. I want them to be aligned so they are top aligned.

The following code makes the blocks display perfectly in IE, but in FF block-5 is not displayed inline with block-3, instead it is pushed down, for the height of block-3.

#block-block-3 {    
    float: left;    
}
#block-block-5 {    
    float: right;        
}

The following code however, positions the blocks perfectly in FF, but in IE it adds around 750px of horizontal white spage under the (default dark grey Bartik) footer.

#block-block-3 {    
    float: left;
    position: absolute;    
}
#block-block-5 {    
    float: right;        
}

What am I doing wrong? How do I get the two blocks to display correctly in both browsers without introducing the extra scrolling and white space under the footer in ie8?

This is the html from source code, for the footer.

<div class="clearfix" id="footer">
    <div class="region region-footer">
        <div class="block block-block contextual-links-region" id="block-block-3">

            <div class="contextual-links-wrapper contextual-links-processed"><a href="#" class="contextual-links-trigger">Configure</a><ul class="contextual-links"><li class="block-configure first last"><a href="/admin/structure/block/manage/block/3/configure?destination=node">Configure block</a></li>
                </ul></div>
            <div class="content">
                <p>Copyright &copy; xyz</p>
            </div>
        </div>
        <div class="block block-block contextual-links-region" id="block-block-5">

            <div class="contextual-links-wrapper contextual-links-processed"><a href="#" class="contextual-links-trigger">Configure</a><ul class="contextual-links"><li class="block-configure first last"><a href="/admin/structure/block/manage/block/5/configure?destination=node">Configure block</a></li>
                </ul></div>
            <div class="content">
                <p><img style="height:60px; width:160px" src="/sites/default/files/xyz.gif" alt=""></p>
            </div>
        </div>
    </div>
</div>
⋅ Categories: Drupal 7.x

Comments

gausarts’s picture

gausarts commented

Please make a sub-theme of bartik so that you can override things as needed.
Your issue is you need a clearfix class on the region <div class="region region-footer">.

If you have it as a sub-theme, you can easily add "clearfix" class to the region classes via YOURTHEME_preprocess_region.

UPDATE:
Or adding the same clearfix rules to .region-footer via custom CSS is much simpler.

love, light n laughter