Extend div height within a div of uncertain height

Question

I'm trying to extend the height of div within a div that doesn't have a fixed height. I have to do this without using position:absolute because the extended div needs to interact with other divs.

The extended div can't have a fixed height and neither the div it's in...

Is there a way to do this in CSS without using JS?

http://jsfiddle.net/q3Sze/2/

Update:

To clarify, in the example, I'm trying to extend the height of .extend div from top to bottom of the .main div. .extend should not have a fixed height and should not be position absolute because it needs to push elements that's around it. To make things even more complicated, the divs are for a fluid site so everything except the .extend div must have a width of 100%.

If you specify a height for .extend you will see what I'm trying to achieve but need to do it without a height specified.

What's your objective here? Not quite clear from the example/code alone — CodingIntrigue, Jul 11 '13 at 12:45
You have two divs next to each other... Do you them to be over and above ? — Brewal, Jul 11 '13 at 12:45
Do you need to have same height for two divs or the `.main` should float right to `.extend`? — code-jaff, Jul 11 '13 at 15:07
@code-jaff, the same height for both divs based on the height of `.main` which isn't fixed. `.extend' should float left. — CyberJunkie, Jul 11 '13 at 15:22

RbG · Answer 1 · 2013-07-11T13:27:58.817

i guess your.wrapper is taking 100% width or your browser screen.and .main or .extend creating problem for you and that is contained in .container.so thats why i edited .container below.if iys make your container like below

.container{
     overflow:hidden;//very importantant to fulfill your criteria
     width:500px;//i gues you want have a fixed width of your container
     margin:3px;//if you want to
     word-break:break-all;//if you use fixed width for your container,because you are writing text with width 100% inside the container

}

EDIT: according to your edit if you want to add.extend below .main the your divs will be

<div class="container">
    <div class="main"></dive>
     <div class="extended">&nbsp;</div>
</div>

now your css should be:

.main {
   width: 100%;
   //doont use height it will take automatic height
}
.extended {
   background: green;
   width: 150px;
   float: left;
   height: 100%;
   margin-top:40px;//create distance from main here,its better option
}

score 1 · Answer 2 · edited May 23 '17 at 10:25

1

I think you are trying to make two columns of same height. Take a look here HTML/CSS: Making two floating divs the same height for some advice. The issue is explained here http://alistapart.com/article/fauxcolumns

edited May 23 '17 at 10:25

Community

1
1

answered Jul 11 '13 at 13:08

Mihai Alex

678
6
13

score 1 · Accepted Answer · answered Jul 11 '13 at 16:33

1

Actually you could do a simple hack like,

.container {
    display:table-row;
}
.extended {
    display: table-cell;
    background: green;
    width: 150px;
}
.main {
    display:table-cell;
}

DEMO

Hope this helps

answered Jul 11 '13 at 16:33

code-jaff

9,230
4
35
56

Extend div height within a div of uncertain height

3 Answers3