Looking for a bit of guidance. Please see my reference web page:
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?
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…
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.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.