DIV HEIGHT 100%

Hello,

you cannot use percentage heights on floats. You will have to use 'faux columns' http://www.alistapart.com/articles/fauxcolumns/

Regards

The hundred 100% Height is working on the floats.. Currently with this setup the two Border DIVS are expanding to a hundred percent of the parent div. My main problem is not the Border Divs expanding it's the parent div container expanding to 100%. I want to stop that...
I only want the parent div to expand to whatever the current content is and still have the border DIVS to expand to 100% of the parent Div.

Does that make sense?

<!-- Parent Container - NO 100% -->
<div ID="FG-contCont-Mid">
 
<!-- BORDER Container - YES 100% -->
<div style="width:23px; float:left; background:url(images/feature-bg-L.jpg) repeat-y; min-height:100%; height:auto; height:100%"></div>
 
<!-- CONTENT Container-->
<div style="width:391px; float:left;">asdfasdf</div>
 
<!-- BORDER Container - YES 100% -->    
<div style="width:23px; float:left; background:url(images/feature-bg-R.jpg) repeat-y; min-height: 100%;height:auto; height:100%"></div>
 
</div>

Select allOpen in new window

I need more information... can you post all of the html and css... and I will try to fix it for you

I wouldnt use this hack if I were you

/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */

why is that?

It was used to give styles only to Internet Explorer 5 on a Mac! Who uses Internet Explorer 5 on a Mac? No one :)

The only hacks I advise are conditional comments.

Are you going to post the html and css or a link to the page?

I can't post a link to the page, it's not online.
Here is the code again.

<style>
/* commented backslash hack \*/ 
html, body { height:100%; }
/* end hack */
 
html, body { margin:0; padding:0 }
#contCont-Mid {width: 436px}
#contCont-Mid .corner {width:23px; float:left}
#contCont-Mid .topMid{float:left; width: 390px; height: 29px; background: url(images/feature-bg-T.jpg) repeat-x;}
#contCont-Mid .botMid{float:left; width: 390px; height: 31px; background: url(images/feature-bg-B.jpg) repeat-x;}
#contCont-Mid .FG-contCont-Mid { width: 436px;}
#contCont-Mid .FG-contCont-Mid .leftMid {float:left; width:23px; background:url(images/feature-bg-L.jpg) repeat-y; min-height:100%; height:auto; height:100%}
#contCont-Mid .FG-contCont-Mid .rightMid {float:left; width:23px; background:url(images/feature-bg-R.jpg) repeat-y; min-height:100%; height:auto; height:100%}
#contCont-Mid .FG-contCont-Mid .center {float:left; width: 390px}
 
* html .FG-contCont-Mid{height:100%;}/* ie6 and under*/
 
 
 
</style>
<div ID="contCont-Mid">
    <div class="corner"><img src="images/feature-corner-TL.jpg" width="23" height="29"></div>
    <div class="topMid"></div>
    <div class="corner"><img src="images/feature-corner-TR.jpg" width="23" height="29"></div>
	<div style="clear:both"></div>
    <div id=".FG-contCont-Mid">
        <!-- EXPANDABLE UNIT 100% HEIGHT-->
        <!-- BORDER-->
        <div class="leftMid"></div>
        <!-- CONTENT BOX-->    
        <div class="center">asdfasdf</div>
        <!-- BORDER-->
        <div class="rightMid"></div>
        <!-- EXPANDABLE END-->
        </div>
    <div style="clear:both"></div>
	<div class="corner"><img src="images/feature-corner-BL.jpg" width="23" height="31"></div>
    <div botMid></div>
    <div class="corner"><img src="images/feature-corner-BR.jpg" width="23" height="31"></div>
 
 	<div style="clear:both"></div>
</div>

Select allOpen in new window

As I said before... you cannot have a percentage height on a float.. it will not work as you wish.

I notice that the two side columns are only 23px wide... you are obviously trying to make a border for the central column with these two columns? You can do this easily with a repeating background image on the central column:

.center {
background:url(image.gif) repeat-y left top;
padding:0px 23px;
width:390px;
}

The image would only need to be 1px tall by 436px wide and it will be repeated down the vertical of the center div. You do not need those two side columns at all.

--

also not that

<style> should be <style type="text/css">

THanks

Yeah... I put the width on it for the time being but I wanted something that could expand Height and Width. That's why I was working with columns.

Got this to work in IE fine but FF and Chrome but the wrapper is still scaling to 100% of the browser height. The internal columns do scale fine to 100% height in all the browsers but how do I stop the outer wrapper from scaling without putting a height attrib on it?

<style type="text/css">
#ContMain {width: 437px}
#ContMain .corner {width:23px; float:left}
#ContMain .topMid{float:left; width: 390px; height: 29px; background: url(images/feature-bg-T.jpg) repeat-x;}
#ContMain .botMid{float:left; width: 390px; height: 31px; background: url(images/feature-bg-B.jpg) repeat-x;}
 
#FG-mainCont { width: 436px; min-height: 100%}
* html #FG-mainCont { height: 100%; margin:0 auto;}
 
div#leftMid {float:left; width:23px; background:url(images/feature-bg-L.jpg) repeat-y; height:100%;}
* html #leftMid { height: 100%; margin:0 auto;}
 
div#center {float:left; width: 383px}
 
div#rightMid {float:right; width:23px; background:url(images/feature-bg-R.jpg) repeat-y; height:100%;}
* html #rightMid { height: 100%; margin:0 auto;}
 
 
</style>
<div id="ContMain">
	<div id="top">
        <div class="corner"><img src="images/feature-corner-TL.jpg" width="23" height="29"></div>
        <div class="topMid"></div>
        <div class="corner"><img src="images/feature-corner-TR.jpg" width="23" height="29"></div>
		<div style="clear:both"></div>
	</div>
    <div id="FG-mainCont">
        <!-- EXPANDABLE UNIT 100% HEIGHT-->
        <!-- BORDER-->
        <div id="leftMid">
        </div>
        <!-- CONTENT BOX-->    
        <div id="center">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
        </div>
        <!-- BORDER-->
        <div id="rightMid">
        </div>
        <!-- EXPANDABLE END-->
         <div style="clear:both"></div>
    </div>
    <div id="bottom">
        <div class="corner"><img src="images/feature-corner-BL.jpg" width="23" height="30"></div>
        <div class="botMid"></div>
        <div class="corner"><img src="images/feature-corner-BR.jpg" width="23" height="30"></div>
        <div style="clear:both"></div>
    </div>
 	<div style="clear:both"></div>
</div>

Select allOpen in new window