CSS Issue

[Twinkie]

Picture: http://i47.tinypic.com/v62d6a.png; HTML: http://pastebin.com/d787a4991; CSS: http://pastebin.com/d3c345b77

I have a #wrapper div set height a fixed width of 600px, containing a div (#textbox) with a relative height of %25. All that is working perfectly. Now inside #textbox I have #send, a div with a relative height of %100, and it will not extend to the bottom of #textbox. So I stop searching frantically for the solution, does any body know if an element can inherit a height from an element that inherited its height value?

 

[scc123]

Try it out, post your CSS it will make it easier to follow, this is what I think you have:

#wrapper {
height: 600px;
width: 600px;
border: 2px solid black;
}
#textbox {
height: 25%;
border: 2px solid red;
}
#send {
height: 100%;
border: 2px solid blue;
}

Which put into html would look like this (I added borders so you could see what was happening):
http://www.storemywork.co.cc/this.html

 

[misson]

There's nothing in the HTML sample (http://pastebin.com/d787a4991).

does any body know if an element can inherit a height from an element that inherited its height value?

If by "inherit" you mean how the CSS spec defines inheritance (the value of a property on a child is set to that of a parent), then yes, but only if you explicitly set the height property of the child to 'inherit'. If you mean whether the height of a child is calculated relative to a parent that has an explicit height, then the answer is yes, but if the parent's height is specified in '%' then it's computed value can't be "auto", otherwise the child's height also becomes 'auto'.

There are plenty of other things that will prevent an element from stretching vertically. When the pastebin HTML sample gets updated, I'll be able to tell you more. Rather than the pastebin sample, how about a live page?

 

[Twinkie]

Here is the URL: http://supertwinkie.co.cc/chat/index.php
Username: twinkie
Password: deathtwinkie666

Also, is there a better way to make the page elements line up? I am aware that the padding, border and margin add to an elements total width (why?), and the percent widths cannot be a decimal. That makes lining up the page elements very difficult when you want to have a 1px border or a padding smaller than 1% of the page. You can see where I had trouble making the elements line up. What can I do about that?

 

[misson]

The problem is there's a <form> element between #textbox and #send. Since the form doesn't have an explicit height, it's given a height of "auto", so #send's percent height also becomes "auto". Set an explicit height on the <form> to fix:

#textbox * {
	height: 100%;
}

Also, is there a better way to make the page elements line up? I am aware that the padding, border and margin add to an elements total width (why?),

If by "total width", you're referring to the box width, box dimensions are defined by the W3C box model. The element width is only the width of the content in the W3C box model. In the old IE box model (used in IE6+ quirks mode and through IE 5.5), the element width included the border & padding. I'm not certain if that explains away your confusion.

and the percent widths cannot be a decimal. That makes lining up the page elements very difficult when you want to have a 1px border or a padding smaller than 1% of the page. You can see where I had trouble making the elements line up. What can I do about that?

This is a common complaint about CSS: that you can't easily combine different units. One solution (not always applicable) is to use negative margins with the other unit. Another is to add additional wrapper elements, using one unit on the wrappers and the other unit on the wrapped. Many find this distasteful, as the extra elements are present for purely presentational purposes (though they themselves aren't presentational elements).

Here's a sample using the two techniques. The style shows only what's added or changed from your main.css.

.inner, #textbox button {
    position: absolute;
    left: 0;
    right: 0;
}

.inner {
    border: 1px solid black;
    padding: 10px;
    top: 0px;
    bottom: 0px;
}

#online {
    ...
    width: 15%;
    position: relative;
}

#chat {
    ...
    position: relative;
}

#textbox * {
    height: 100%;
}

#textbox .frame {
    position: relative;
    float: left;
}

#textbox textarea {
    width: 90%;
    margin-right: -1px;
    float: left;
}


#textbox #sendFrame {
    width: 10%;
}

#textbox #send {
    left: 5px;
    right: 0;
    background-color: #CCC;
    border: 1px solid black;
    display: table-cell;
    text-align: center;
    cursor: pointer;
}

<div id="wrapper">
    <div id="online">
      <div class="inner">
        <span style="color: red">Twinkie</span><br />
        <span style="color: green">Calistoy</span><br />
        <span style="color: blue">Sharky</span><br />
      </div>
    </div>
    <div id="chat">
      <div class="inner">
        <span style="color: red">Twinkie</span>: I justed wanted to say something not very important.<br />
        <span style="color: green">Calistoy</span>: What I as about to say was equally unimportant.<br />
        <span style="color: blue">Sharkey</span>: I was about to interrupt you.<br />
      </div>
    </div>
    <div id="textbox">
        <form method="post" action="#" name="user">
            <textarea name="message"></textarea>
            <span id="sendFrame" class="frame">
              <button id="send">Send</button>
            </span>
        </form>
    </div>
</div>

The various methods of mixing units can still suffer from rounding errors, which are visible as you resize the window.