Riddle of a(n impossible?) layout

[zaxnyd]

I need to accomplish what I thought would be a very simple layout, but after many different tries from many different angles, I'm almost convinced it's impossible.

Here's the gist:

________________________
x height ¦_5_height____¦
__________¦_x-5_height__¦

In words, I want to accomplish a layout where square A of variable height is adjacent to squares B and C of specified height and the remainder (respectively).

I tried using a table, but IE doesn't honor heights specified for cells contained within a spanned row.

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

Depending on the constraints, it may very well be possible using positioning.

<div id="wrap"> 
 <div id="a"></div> 
 <div id="b"></div> 
 <div id="c"></div> 
</div>

#wrap { 
 position: relative; 
 width: 500px; 
} 
#a { 
 background: #c00; 
 height: 250px; /* adjust this height, and you will see #c adjust */ 
 width: 250px; 
} 
#b { 
 background: #ff0; 
 height: 30px; 
 position: absolute; 
 right: 0; 
 top: 0; 
 width: 250px; 
} 
#c { 
 background: #0c0; 
 bottom: 0; 
 position: absolute; 
 right: 0; 
 top: 30px; 
 width: 250px; 
}

[edited by: DrDoc at 3:30 am (utc) on July 21, 2007]

[Xapti]

IE will need Javascript to support simultaneous use of both top and bottom at the same time (Silly IE :( )

And just so you know, in the method he gave, the height doesn't need to be defined. It could be an unknown length of text inside, where the height is decided by the text.

[edited by: Xapti at 7:07 am (utc) on July 21, 2007]

[DrDoc]

IE6 and older, yes ...
But not IE7.

But, hey -- at least that's something that can easily be fixed using Conditional Comments or Dean Edwards' IE7 patch.

[SuzyUK]

this depends on how "fixed" you want to make it, if it's simply a background issue then perhaps the "faux" column technique would be enough?

Using floats with very little "forcing the situation" might do for your needs?

e.g. you have the square defined with an outer div to constrain the width, then you float the left portion - (the height controller?) - left then let the other two flow,
fix the height of the second (top right) div and the other will fill if "contained" properly

CSS:
.square {width: 300px; background: #dad; overflow: auto;} /* background/color of right lower div */
.left {float: left; width: 150px; background: #fff;} /* left background/color */
.top {height: 50px; background: #eee;} /* top right background/color */

HTML:
<div class="square">
<div class="left">this is the left content and it shouldn't matter how long it grows, insert loads of favourite foo here...</div>
<div class="right top">right top - fixed height 50px</div>
<div class="right lower">lower right appears to fill the remaing space</div>
</div>

[edited by: SuzyUK at 6:24 pm (utc) on July 21, 2007]

[zaxnyd]

Thanks for the great replies.

The backgrounds are comprised of png backgrounds with transparency, so layering them isn't an option, such as was suggested by SuzyUK.

In DrDoc's example, #c doesn't span the remainder of #a's height. And #a's height can't be specified.

It seems JS is the solution, as suggested by Xapti.

Your time is appreciated.

[DrDoc]

In DrDoc's example, #c doesn't span the remainder of #a's height. And #a's height can't be specified.

It should, unless you're looking in IE6. Or, unless the height is greater than that of the viewport.

Perhaps if you provided some additional information, such as a stripped down version of your current HTML and CSS?

[zaxnyd]

It should, unless you're looking in IE6. Or, unless the height is greater than that of the viewport.

Perhaps if you provided some additional information, such as a stripped down version of your current HTML and CSS?

What I'm trying to accomplish is a dynamically sizing drop shadow frame using png images. So I need a static sized corners and stretching edges so it'll fit whatever I put inside it.

This works beautifully in firefox but not ie:

<style>

.shadow .topright {
background-image: url(images/shadow.top-right.png);
background-position: top right;
background-repeat: no-repeat;
margin-top: 7px;
}

.shadow .right {
background-image: url(images/shadow.right.png);
background-position: right;
background-repeat: repeat-y;
}
.shadow .bottomleft {
background-image: url(images/shadow.bottom-left.png);
background-position: bottom left;
background-repeat: no-repeat;
}
.shadow .bottom {
background-image: url(images/shadow.bottom.png);
background-position: bottom;
background-repeat: repeat-x;
}
.shadow .bottomright {
background-image: url(images/shadow.bottom-right.png);
background-position: bottom right;
background-repeat: no-repeat;
}

.shadow .content {
padding: 5px;
}
</style>

<table class="shadow" cellpadding=0 cellspacing=0>
<tr>
<td colspan=2 rowspan=2 class="content">dynamic content goes here</td>
<td class="topright" width=7 height=7><img src="images/spacer.png"></td>
</tr>
<tr>
<td class="right"><img src="images/spacer.png"></td>
</tr>
<tr>
<td class="bottomleft" height=7 width=7><img src="images/spacer.png"></td>
<td class="bottom"><img src="images/spacer.png"></td>
<td class="bottomright" height=7 width=7><img src="images/spacer.png"></td>
</tr>
</table>

[zaxnyd]

Still no luck on my end. Any more suggestions? =\

[zaxnyd]

I stumbled upon the answer.

[positioniseverything.net...]