HTML problem

[puffpio]

I need to place 3 div's within another div. the 3 subdivs are aligned left, center, and right..but I cna't get the middle one to align in the middle. The left and right div's are fixed width and the middle one should expand to fill out the space

looks like this

<div id="outerdiv" style="width: 100%; display:block; min-width: 600px;">
<div id="left" style="width: 200px; display:block; float:left;">
</div>
<div id="middle" style="width: auto; display:block; float:left;">
</div>
<div id="right" style="width=200px; display:block; float:right;">
</div>
</div>

I set a minwidth on the outer div so that the divs inside will not wrap when I resize smaller.

I want that center div to fill up the space between the other two divs, so that all three together fill up the outerdiv completely.


I was thinking if it ends up filling the outerdiv completely, then the right div could be floated left with the others because it will all fit. I still don't know how to get the center div to fill up the remaining space though.

any ideas?

 

[ChristianV]

Hmm, I did this once too.
I placed the two divs at the side with position: absolute; and I placed the inner div using realtive. To make sure it doesn't go over the div's at the side, I used margin-left and margin-right. I also used width: auto on it.

Btw: min-* is not supported very well. I don't recommend you to use that.

 

[puffpio]

thanks, your advice helped solve my problem

i have another problem now.

the right most div when clicked makes a drop down menu.
what i did was hide another div within the right inner div, and make it display when the heading is clicked. the intention is for that dropdown div to overflow out of it's parent div so it can basically float over whatever is below it at the time.
However IE7 is resizing the parent div to be the size of the drop down menu.

this seems to be a common problem and was wondering if anyone found a solution.

so my new problem looks something like this stripped down:

<div id="outerdiv" style="width: 100%; height: 30px; display:block; min-width: 600px;">
<div id="left" style="width: 200px; display:block; float:left;">
</div>
<div id="middle" style="width: auto; display:block; float:left;">
</div>
<div id="right" style="width=200px; display:block; float:right;">
<div id="menuheader" style="display:block;" onclick="showmenu();">clickme to show menu</div>
<div id="menubody" style="display:none;">menu stuff that has a decent vertical height more than the 30px of the outer div</div>
</div>
</div>

 

[GoatMonkey]

In your JavaScript you could try getting the left and top values for menuheader. Then set your menubody's left and top based on that. The menubody div would have to be outside your other div structure as kind of a standalone item, with absolute positioning to overlap the other div.