CODEWITHSUNDEEP
csshtml
dmrc1143
dmrc1143

Reputation: 91

height of <div> tag

I have 2 divs in my page: <div id="firtdiv" style="top:100px; left:200px; height:unknown"></div> <div style="top:unknow; height:200px" id="seconddiv"></div>

I will set firstdiv's height auto because I will put a datalist so I don't know it's height. And secondiv's top property will change according to the fistdiv's height. Second div is bottom of firstdiv.

How can I do?

Upvotes: 1

Views: 18718

Answers (1)

kazinix
kazinix

Reputation: 30163

I suggest put two DIV's in a DIV (which is set to absolute). 'Coz when you set both to absolute, then there's no way they will push each other. Here's an example:

<div id="wrapper">
    <div id="content">
        Content...
    </div>

    <div id="bottom">
        Botom..
    </div>
</div>

For the CSS:

#wrapper
{
    position:absolute;
    top: 110px;
    left: -400px;
    width:800px;
}

#bottom
{
    border-top: 2px dotted #2259FF;
    font-family: ebrima;
    padding-top: 5px;
    height: 200px;
    margin-left: 50%;
    background-color:green;
}
#content
{
    padding: 0px;
    margin-left: 50%;
    min-height:400px;
    _height:400px;
    background-color:yellow;
}

As you can see, I put your 2 DIV's in a parent DIV (wrapper). The parent DIV is set to absolute just like how you want two DIV's to be positioned. Two DIV's then not positioned to absolute so that first DIV will push the second div when its content grows. Also, if you want to retain the minimum height of the first DIV, put a min-height:400px, but be careful 'coz there's a problem with min-height in internet explorer, what you can do to make it work in IE is put _height:400px; coz IE considers height as min-height, IE will consider _height (with underscore) but not other browser, so it wont have effect to other browsers.

Upvotes: 2

Related Questions