CODEWITHSUNDEEP
jqueryhtmlcssjquery-ui
ilyes kooli
ilyes kooli

Reputation: 12053

Dynamic and custom div positionning

I have this div structure 

<div class="panel">
    <div class="north"></div>
    <div class="center"></div>
</div>

The outer div is jQuery resizable I tried to position the divs with percentage,

.north{height:30%}
.center{height:70%}

Works perfect, I got this
enter image description here

Now I am stuck on how to get this:
enter image description here
Any help?
Don't forget that the outer div is resizable please..

Here is my starting point.

Edit
I tried also

.panel{display:table;}
.north,.center{display:table-row;}

But this doesn't work on IE<8

Upvotes: 2

Views: 402

Answers (4)

biziclop
biziclop

Reputation: 14616

Another solution with floats: http://jsfiddle.net/KMWw4/2/

.panel {
    width:  300px;
    height: 500px; /* explicit height */
    float: left;
}
.north {
    float: left; display: inline; /*iefix*/
    width:  100%;
}
.center {
    height: 100%;
}

.panel-percent .north {
    height: 30%; /* you can use percentages */
}
.panel-fixed .north {
    height: 100px; /* ... or pixel height */
}

​

Upvotes: 1

Ben Greene
Ben Greene

Reputation: 147

you could try this:

http://jsfiddle.net/KSY6T/3/

.panel{
    min-height:150px;height:300px;overflow:hidden;position:relative;
    /* height:300px; is optional, i just used it for demonstrational purposes */
}

.north{
    position:absolute;top:0px;width:100%;height:150px;
}

.center{
    margin-top:150px;height:100%;
}

just resize the parent container see what happens...

you'd have to check for full cross-browser compatibility yourself, i've checked it with my browsers and it works just fine on all of them:

  • safari 5
  • opera 11
  • firefox 3.5
  • firefox 4

Upvotes: 0

Rodrigo
Rodrigo

Reputation: 704

It is simple. ;)

  1. Position the 150px object with position:absolute and top:0. (you may need to set left and right to zero too)
  2. set the top-margin of the area with a dynamic height to 150px.

Upvotes: 0

Rene Pot
Rene Pot

Reputation: 24815

.panel {
    position: relative
} 

.center { 
    position: absolute;
    top: 150px;
    bottom: 0px;
}

By setting to parent/outer div to position relative, and the inner ones to absolute, you can do a trick like this.

The updated fiddle: http://jsfiddle.net/PnnMa/1/

Upvotes: 1

Related Questions