Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1884
  • Last Modified:

DIV HEIGHT 100%

Sup all,

I know this has been beaten to death but I could use a quick Hand. I ran into a slight Hiccup...
I got the 100% height thing working but on the wrong Div...

I need two of the center Divs(which are border graphics) to expand to 100% of what their parent div is. Currently the whole damn Container is growing to 100% of the browser window.

It seems to me I've targeted the divs but they aren't playing nice.

Any idea what I did wrong?
<style>
/* commented backslash hack \*/ 
html, body{height:100%;} 
/* end hack */
html,body {margin:0;padding:0}
#FG-contCont-Mid {width: 437px;}
 
</style>
<div ID="FG-contCont-Mid">
<div style="width:23px; float:left"><img src="images/feature-corner-TL.jpg" width="23" height="29"></div>
<div style="width:391px; float:left; height: 29px; background: url(images/feature-bg-T.jpg) repeat-x;"></div>
<div style="width:23px; float:left"><img src="images/feature-corner-TR.jpg" width="23" height="29"></div>
<div style="clear:both"></div>
 
<!-- 100% HEIGHT - CENTER LEFT BACKGROUND -->        
<div style="width:23px; float:left; background:url(images/feature-bg-L.jpg) repeat-y; min-height:100%;height:auto; height:100%"></div>  
<div style="width:391px; float:left;">asdfasdf</div>
<!-- 100% HEIGHT - CENTER RIGHT BACKGROUND -->     
<div style="width:23px; float:left; background:url(images/feature-bg-R.jpg) repeat-y; min-height:100%;height:auto; height:100%"></div>
 
<div style="clear:both"></div>
<div style="width:23px; float:left"><img src="images/feature-corner-BL.jpg" width="23" height="31"></div>
<div style="width:391px; float:left; height: 31px; background: url(images/feature-bg-B.jpg) repeat-x;"></div>
<div style="width:23px; float:left"><img src="images/feature-corner-BR.jpg" width="23" height="31"></div>
</div>

Open in new window

0
rurth24
Asked:
rurth24
  • 6
  • 5
2 Solutions
 
Mark StegglesWeb DeveloperCommented:
Hello,

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

Regards
0
 
rurth24Author Commented:
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>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
I need more information... can you post all of the html and css... and I will try to fix it for you
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Mark StegglesWeb DeveloperCommented:
I wouldnt use this hack if I were you

/* commented backslash hack \*/
html, body{height:100%;}
/* end hack */
0
 
rurth24Author Commented:
why is that?
0
 
Mark StegglesWeb DeveloperCommented:
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?
0
 
rurth24Author Commented:
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>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
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
0
 
Mark StegglesWeb DeveloperCommented:
Get rid of these styles:

/* commented backslash hack \*/
html, body { height:100%; }
/* end hack */
 
#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%}
 
* html .FG-contCont-Mid{height:100%;}/* ie6 and under*/
0
 
rurth24Author Commented:
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.

0
 
David S.Commented:
This seems overly complicated. You just want a flexible sized box with a custom border, right?

Check this out: http://www.456bereastreet.com/archive/200406/css_teaser_box_revisited/

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

No, it is used to hide styles from IE5/Mac. I still use it sometimes, but probably wouldn't bother using it to hide that specific rule.
0
 
rurth24Author Commented:
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>

Open in new window

0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now