CODEWITHSUNDEEP
csshtmlheightcss-position
JoMs
JoMs

Reputation: 45

DIV's are getting pushed out window by other DIV's

I have this fairly unusual problem (after what I've understood when asking others), it seems that my -tags don't understand how much of the screen that is used by other elements, and therefore push elements out of screen.
I thought it might had something to do with the use of position:fixed, but it didn't seem to solve it when removing the position-part at all.

This is the main markup that seems to have problems, in wich I really can't seem to see any errors.

<div id="search">
    <div id="searchfield">
        <span id="searchinput">
            <input type="text" id="s" name="s" />
        </span>
        <button>Search</button>
    </div>
    <div id="searchresults">
        <ul class="longlist">
        </ul>
    </div>
</div>

The problem is best seen in this jsFiddle where it seems #searchresults is pushed out of #search by #searchfield.
As I really don't know what's the problem, any attempt on using Google have left me with no good answer to where my problem really is.

I have tried removing any JS that modifies the at all, and as we can see the jsFiddle does not run any JS at all, and still my markup/CSS does not work.

The height of #search is set to 400px in this fiddle to show the flaw better. But the same error occurs when it's 100% (wich is the value it should have in production-code).

Does anyone have any idea why this is happening?

Upvotes: 0

Views: 991

Answers (2)

nerdarama
nerdarama

Reputation: 493

It seems to work at 

 #search{
   height: 100%;
 }

no?

link:

http://jsfiddle.net/KX9BV/8/

Upvotes: 0

Rob Farr
Rob Farr

Reputation: 853

This is caused by an overflow problem. The div "#searchfield" is pushing down the other content.

Setting the height to "auto" by removing the line "height: 400px;" on "div#search" and set a fixed height on "div#searchresults" fixes the problem.

#search{
   height: 400px;
}

Taking the "div#searchfield" outside of the "div#search" also works.

<div id="searchfield">...</div>
<div id="search">...</div>

These methods show that the overflow problem is caused by mixing relative and absolute heights. You should move some of your styles relating to height from "div#search" into "div#searchresults" to fix this.

Upvotes: 1

Related Questions