CODEWITHSUNDEEP
htmlcss
Patrick Guinness
Patrick Guinness

Reputation: 397

Why is relative positioning causing space below elements?

I have a div on my homepage, not positioned, it holds the main image. On top of this main image I have a container which holds my search bar. I've positioned this container position:relative top:-500px; so that it appears over my main image.

I then have another 2 containers which come next, but if I do nothing positionally with them, they appear after a big vertical space, so I've had to position:relative and add a minus top to. I have to keep doing this top:-300px or whatever because if I don't a space appears beneath which I can't fill.

Now the next div down is the footer which I don't want to have to posiiton because it appears on every page. How can I get rid of the space between my featured properties and the footer?

Here's the code:

//no positioning
<div style="margin: 0 auto" class="slideshowWrap">
    <div class="homeslideshow slide1"> 
    </div>
    <div class="homeslideshow slide2">  
    </div>
    <div class="homeslideshow slide3">   
    </div>
</div>


//position:relative top:-500px
<div id="homecontainer">
</div>


//position:relative; top:-300px; margin-bottom:-100px;
<div id="homeBoxContainer">
</div>
<div style="clear:both"></div>

//position:relative; top:-300px; 
<div id="homeFeaturedContainer">
</div>

Upvotes: 3

Views: 274

Answers (2)

Ricardo Nu&#241;ez
Ricardo Nu&#241;ez

Reputation: 989

You have a problem the way you designed your containers. When you moved everything up using position:relative and top:-300 it moves everything up, but the height from your #content is still saving the space and maintaining the height. If you want your footer links up, add the following code

#footer {
top: -300px;
position: relative;
}

that doesn't solve your problem because you still have the big height created by your odd design. You need to go back to the drawing board and redesign your container. You don't need the position:relative and moving everything up.

Upvotes: 1

isherwood
isherwood

Reputation: 61063

I generally only set top and bottom values on absolutely-positioned elements. Try this instead:

#homeFeaturedContainer {
    margin-top: -300px;
    margin-bottom: -300px;
}

Upvotes: 0

Related Questions