CODEWITHSUNDEEP
htmlcss
Jack Pilowsky
Jack Pilowsky

Reputation: 2303

Clearfix with negative absolute positioning

I'm working on a project using a responsive layout. I have a div that goes beneath and around the header div. I did this with negative absolute positioning. The problem is the elements following that are getting positioned on top of it. The absolute positioning took that div out of the normal flow of the page and now stuff is stocking up on top of it.

Normally, I would just absolutely position the rest of of the elements in the content div, but the absolutely positioned div contains an image slider which is responsive so the height of the div varies depending on width of the screen. 

<div id="container">
    <div id="header"></div>
    <div id="content">
        <div id="absolutely_positioned"></div>
        <div id="problem_div">
    </div>
</div>

#container {
max-width: 1600px;
}
#header {
    width: 52.5%
    height: 146px;
}
#content {
position: relative;
}
#absolute_position{
position: absolute;
top:-100px;
}

Upvotes: 0

Views: 687

Answers (2)

Matto
Matto

Reputation: 236

Just take off the 

position:absolute;

and instead of using 

top:-100px;

use 

margin-top:-100px;

I fixed it on your jsfiddle.

Upvotes: 1

smilebomb
smilebomb

Reputation: 5483

The elements following the absolutely positioned div are getting stack on top of it? I'm not getting the problem: jsfiddle. Note that I had to fix some typos; double check your classes/IDs in the markup and stylesheet are matching.

CSS (with fixed typos):

#container {
max-width: 1600px;
    border:2px dotted black;
}
#header {
    width: 52.5%;
    height: 146px;
    border:1px solid red;
}
#content {
position: relative;
}
#absolutely_positioned{
    position: absolute;
    top:-100px;
    background:blue;
}

Of course, this is assuming my comment above didn't isolate the problem being that your problem_div does not have a closing tag in the code you posted.

EDIT

In response to your comment above, I know your problem now. You will notice the blue box is aligning right underneath the red box. This is normal behavior because those are both relative divs. When you make a div absolute, not only does it ignore surrounding divs (but not containing divs) but the surrounding divs also ignore it. That is, the green box will not push the blue box down, only the red box will. To illustrate the answer further, if you click my jsfiddle you will see the problem_div text right underneath the header div, which is where it should be. The absolute div does not affect this behavior.

Upvotes: 1

Related Questions