LebGeeks

Kassem

Member

[CSS] Percentage Heights Not Working

Hey guys,

This is weird... When I use pixels for measurement, it works like a charm, when I use percentages nothing shows up... What could be wrong?

<div id="fullPage"> 
		
        <ul id="mainNav"> <!--Top Navigation Bar -->
            <li> <a href="about.html"> <img src="images/about_btn.gif" /> </a> </li>
            <li> <a href="services.html"> <img src="images/services_btn.gif" /> </a> </li>
            <li> <a href="doctors.html"> <img src="images/doctors_btn.gif" /> </a> </li>
            <li> <a href="contact.html"> <img src="images/contact_btn.gif" /> </a> </li>
        </ul> <!--End Top Navigation Bar -->
   		

		<div id="wrapper"> <!--Page Wrapper -->
        	<div id="hd"> </div> <!--Doesn't contain anything -->
            
			<div id="sideMenu"><!--Left Side Bar -->
            	
                <div class="hdImg">
                	<img src="images/free_services.gif" />
                </div>
                <div id="secNav">
                	<ul>
                    	<li><a href="news.html"> Medical News </a> </li>
                        <li><a href="info.html"> Health Information </a> </li>
                        <li><a href="ask.html"> Ask The Doctor </a> </li>
                        <li><a href="appointment.html"> Request Appointment </a> </li>
                        <li><a href="submit_article.html"> Submit An Article </a> </li>
                        <li><a href="questions.html"> FAQ </a> </li>
                    </ul>
                </div>
                
                <div id="newsletter">
                	<div class="hdImg">
                    	<img src="images/newsletter.gif" />
                    </div>
                    <div id="subscription">
                    	<form action="#" method="post">
                            <input id="subscribeInput" type="text" value="Enter You Email" />
                            <p>
                                Subscribe to receive the latest updates on health topics
                            </p>
                            <input type="image" src="images/subscribe_btn.gif" id="subscribeBtn" />
                        </form>
                    </div>
                </div>
            </div><!--End Left Side Bar -->
        </div>  <!--End Page Wrapper -->
        
        <div id="footer">
        	© Copyrights Reserved - 2010
        </div>
       
   </div> <!--End Full Page -->

* {
	padding: 0;
	margin:0;	
}

body {
	background-image:url(../images/bg.gif);
	background-repeat:repeat;
	padding: 0;
	margin:0;
	height:100%;
}

#fullPage {
	margin:0 auto;	
	width:960px;
	height:100%;
}

#mainNav {
	position:relative;
	width:450px;
	top:25px;
	left:400px;
	z-index:1;
}

#mainNav li {
	list-style:none;
	display:inline;	
	margin:-2px;
}

 a img {
	border-style:none;
	border:0px;
}

#wrapper {
	position:relative;
	top:17px;
	background-color:#FFF;	
	width:900px;
	height:650px; // This is what's causing the problem... when I use something like 80% it disappears
}

#head {
	position:absolute;
	background:url(../images/header_bg.gif) repeat-x;
	height:109px;
	width:100%;
	top: 76px;
	z-index:100;
}

#logo {
	position:relative;
	left:7%;
	top:10px;
	width:403px;	
}
	
#hd {
	height:109px;
	width:100%;	
	margin-top:15px;
	clear:both;
	float:left;
}

I think that's enough code...

Last edited by Kassem (June 5 2010)

samer

Admin

Re: [CSS] Percentage Heights Not Working

Post the code :)

Kassem

Member

Re: [CSS] Percentage Heights Not Working

Alright, post updated... I posted the code :)

Kassem

Member

Re: [CSS] Percentage Heights Not Working

And the same issue again...

<div id="mainContainer"><!--Begin Main Container Tag-->
      
      <div id="nav"><!--Begin Header Tag-->
        //a Flash object goes here
      </div> <!--End Nav Tag-->
      
      <div id="header"> <!--Begin Header Tag-->
        //another Flash object goes here
      </div> <!--End Header Tag-->
      
  <div id="wlc" class="homeBox"> <!--Begin Welcome Tag-->
          <h2> Welcome... </h2> <br />
          <p>
              Elegance Laundry & Dry Cleaning has been in business since 1952. Our family run business, along with our considerate and informative staff, is the strength of our operation... <a href="#">READ MORE</a>
          </p>
      </div> <!--End Welcome Tag-->
      
    <div id="what" class="homeBox"> <!--Begin What Tag-->
      <h2> So What Do We Do? </h2> <br />
      <p>
        <ul>
              <li>Dry cleaning & steam ironing</li>
              <li>Special Blanker Cleaning</li>
              <li>Leather Cleaning & Leather Dyeing</li>
              <li>Carpet Cleaning</li>
              <li>Dyeing Colors... <a href="#">READ MORE</a></li>
        </ul>
      </p>
      
      </div><!--End What Tag-->
      
    <div id="green" class="homeBox"> <!--Begin Green Tag-->
  
      </div> <!--End Green Tag-->
  </div> <!--End Main Container Tag-->

* {
	padding:0;
	margin:0;	
}

body {
	background:url(../images/bg.gif) repeat-x;
	background-color:#4caff3;
}

#mainContainer {
	position:relative;
	top:80px;
	background-color:#FFF;
	width:850px;
	height:650px; //if I set this to 100% it extends to the height of the Flash banner but not to the content boxes below... 
	margin:0 auto;
	padding-top:10px;
}

a {
	text-decoration:none;
	color:#FFF;
	font-weight:600;
}

#header {
	width:830px;
	height:350px;
	margin:0 auto;	
}

#nav {
	width:830px;
	height:50px;
	margin:0 auto 10px;
}

.homeBox {
	width:250px;
	height:180px;
	float:left;
	display:inline;
	margin:10px 0 0 10px;
	padding:10px;
	color:#FFF;
	font-style:italic;
	font-size:93%;
	font-family:Tahoma, Geneva, sans-serif;
}

#wlc {
	background-color:#f55e17;	
}

#what {
	background-color:#7da61c;
}

#what ul {
	list-style:none;
}

#green {
	background-color:#f7cc04;
}

Basically, what I want to do is to have a fixed width with a fluid height (i.e: have the mainContainer extend to the height of all the contents inside it)... Any suggestions please?

Joe

Member

Re: [CSS] Percentage Heights Not Working

I'm no CSS guru, but I think that there's no such thing as percentage in heights. As the page has no fixed height after all (unlike horizontal width, where 100% matches your display).

EDIT This post might help. The idea is to wrap up the div in a containing div with fixed height.

Last edited by Joe (June 8 2010)

Kassem

Member

Re: [CSS] Percentage Heights Not Working

rahmu you're the best! Ok I tried assigning 100% to the body tag but that didn't do it either, then I thought I'd assign 100% to the html tag as well, and that did the trick :)

Thanks a lot man! Appreciated!

rolf

Member

Re: [CSS] Percentage Heights Not Working

When is have this problem, I use tables.

Joe

Member

Re: [CSS] Percentage Heights Not Working

won't get drawn again into this troll ... arrrrrgh

Kassem

Member

Re: [CSS] Percentage Heights Not Working

When is have this problem, I use tables.

You just like taking the easy way out eh? :)