[fallenreaper]

I have a object being build with asp.net, a div. In the div, there are 2 children, another div (called innerDiv) and a textarea. the parent div has a height of say, 500px. InnerDiv has some height. but is defined based on its contents. More or less I want to have Textarea.height = parent.height - sibling.height. I was trying the css for height (auto, inherit, 100%) but those do not work.

Does anyone know how to accomplish this tasks? Code is below:

HtmlGenericControl div = new HtmlGenericControl("div");
div.ID = "layer" + dr["el_id"].ToString();
div.Style.Add("position", "absolute");
div.Style.Add("left", dr["el_xpos"].ToString() + "px");
div.Style.Add("top", dr["el_ypos"].ToString() + "px");
div.Style.Add("width", dr["el_width"].ToString() + "px");
div.Style.Add("height", dr["el_height"].ToString() + "px");
div.Style.Add("background-color", "#99ccff");
div.Attributes["itemType"] = dr["el_name"].ToString();
div.Attributes["class"] = div.Attributes["class"] + " draggable";
div.Attributes["elType"] = dr["et_id"].ToString();
                    
HtmlGenericControl innerDiv = new HtmlGenericControl("div");

HtmlImage img = new HtmlImage();
img.Src = "~/images/MemoEditor_ABCtoolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
img = new HtmlImage();
img.Src = "~/images/MemoEditor_SuperToolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
img = new HtmlImage();
img.Src = "~/images/MemoEditor_FontToolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
img = new HtmlImage();
img.Src = "~/images/MemoEditor_BoldToolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
img = new HtmlImage();
img.Src = "~/images/MemoEditor_AToolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
img = new HtmlImage();
img.Src = "~/images/MemoEditor_OhmToolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
img = new HtmlImage();
img.Src = "~/images/MemoEditor_FileToolbar.png";
img.Style.Add("padding", "0px");
img.Style.Add("border", "0px");
innerDiv.Controls.Add(img);
div.Controls.Add(innerDiv);

HtmlTextArea tarea = new HtmlTextArea();
tarea.Style.Add("box-sizing", "border-box");
tarea.Style.Add("-moz-box-sizing", "border-box");
tarea.Style.Add("-webkit-box-sizing", "border-box");
tarea.Style.Add("width", "100%");
//tarea.Style.Add("height", "auto");
//tarea.Style.Add("height", div.Style["height"] - innerDiv.Style["height"]);
div.Controls.Add(tarea);

you can see that tarea.Style.Add("height"...) is where i want to add it but i cant seem to determine the code for it.

Anyone have any ideas as to how to accomplish this?

the markup would look something similar to:

<div>
  <div><img /><img /></div>
  <textarea />
</div>

This post has been edited by fallenreaper: 27 August 2012 - 01:45 PM