Overlapping DIVs

Hi all,

Looking for a bit of guidance. Please see my reference web page:
http://tanngiblebeauty.christopherbush.co.uk

If you take a look on the right side of the page there are two DIVs that are overlapping - What I’m trying to do is move the DIV that has the class “header-polish” up so that it is positioned underneath the navigation menu in the header. The problem is - I can’t seem to move it any further up than the top of the “columns” DIV because that serves as the wrapper for the left and right columns.

I have tried using negative margins but it disappears once it breaches the top of the “columns” div.

I have tried putting it in the “header” div but then that extends the bottom of the header div so there’s a gap beneath the logo instead.

Basically - I want to leave the “hands” where they are right now and move the “polishes” up to fill the blank space between them and the navigation - then the “sidebar” should be directly below them.

Can anyone take a look at my current HTML/CSS layout and tell me where I’m going wrong?

Thanks.

1 Like

I can’t access that link.

Does the columns div have overflow: hidden applied?

Apologies - The link is tangiblebeauty.christopherbush.co.uk

And yes - overflow:hidden is specified because without it the footer area jumps half way up the page instead off staying at the bottom…

Hi,

I think you must have changed this since you posted but just to clarify that your use of overflow:hidden can be avoided if you use other float containment mechanisms. You are using overflow:hidden because it creates a new block formatting context and thus will contain its floated children.

When you need visible overflow you can instead of using overflow:hidden use the old 'clearfix technique’ or for ie8+ support you can simply use display:table on the parent which will also contain the child floats as display:table creates an anonymous table-cell element and table-cell elements create new block formatting contexts and thus contain child floats automatically.

div.columns{overflow:visible;display:table;width:95%;}

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.