www.webdeveloper.com
Results 1 to 4 of 4

Thread: 100% Height in CSS!

  1. #1
    Join Date
    Sep 2010
    Location
    UK
    Posts
    30

    Exclamation 100% Height in CSS!

    hello,


    i want to try to make a blank a div with 100%, but it did't work, here is a my HTML and CSS code,

    HTML Code:
    <div class="left">
          <div class="hdn">
            <p>Projects</p>
          </div>
          <div class="hdnd">
            <ul>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
            </ul>
          </div>
          <div class="blnk"></div>
          <div class="hdn">
            <p>Projects</p>
          </div>
          <div class="hdnd">
            <ul>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
              <li><a href="#" >Home</a></li>
            </ul>
          </div>
          <div class="blnk"></div>
          <div class="exblank"></div>  /* this is div ,want make 100% height*/
        </div>

    CSS Code!

    Code:
    #header .top-bar .left{ background:url(../images/top-left.png) no-repeat; width:28px; height:30px; float:left;}
    #header .top-bar .mid{ background-color:#00AB8A; height:30px; width:880px; float:left;}
    #header .top-bar .mid .links ul{ width:auto; height:30px; float:right; margin:0 0 0 10px;}
    #header .top-bar .mid .links ul li{ float:left; list-style:none; margin:0px 3px 0 3px; line-height:30px;  color:#FFFFFF;}
    #header .top-bar .mid .links ul li a{ line-height:30px; text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; float:left; margin:0 0 0 0; color:#FFFFFF;}
    #header .top-bar .mid .links ul li a:hover{ text-decoration:none;}
    #header .top-bar .mid img{ float:right; height:30px; width:auto; margin-left:10px; border:none;}
    #header .top-bar .right{ background:url(../images/top-right.png) no-repeat; width:22px; height:30px; float:right;}
    #header .mid{ height:130px; float:left; margin:0 0 0 0; width:930px;}
    #header .mid .address{ width:150px; height:auto; margin:20px 0 0 0; float:right;}
    #header .mid .address p{ line-height:16px; color:#666666; width:150px; float:left; font-family:Arial, Helvetica, sans-serif; font-size:14px; font-weight:bold;}
    #header .mid .address p span{ color:#43ad9f;}
    #header .mid #logo{ display:inline; float:left; margin:60px 0 0 57px; background:url(../images/logo.jpg) no-repeat; height:64px; width:408px; }
    #content{ width:930px; height:auto; float:left; margin:5px 0 0 0;}
    #content .left{ width:140px; height:100%; min-height:100%; float:left; margin:28px 10px 0 0;}
    #content .left .hdn{ width:140px; height:20px; float:left; margin:0 0 0 0; background-color:#00AB8A; }
    #content .left .hdn 
    #content .left .hdn p{ font-family:Arial, Helvetica, sans-serif; font-size:12px; float:right; line-height:20px; font-weight:bold; color:#FFFFFF; margin:0 5px 0 0;}
    #content .left .hdnd {width:140px; height:auto; float:left; margin:0 0 0 0; background-color:#666666; padding-bottom:20px;}
    #content .left .hdnd ul{ display:inline; float:left; width:120px; height:auto; margin:0 0 0 20px; list-style:square; color:#FFFFFF;  }
    #content .left .hdnd ul li{ float:left; width:120px;  }
    #content .left .hdnd ul li a{ color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; line-height:18px; float:left; list-style:inherit; text-decoration:none;}
    #content .left .hdnd ul li a:hover{ text-decoration:none; color:#000000;}
    #content .left .blnk{ width:140px; height:10px; float:left;}
    #content .left .exblank{ background-color:#00AB8A; min-height:100%; width:140px; float:left;}  /* div CSS */

    can any body tell me what is wrong with my div and where i am worng.

  2. #2
    Join Date
    Nov 2010
    Location
    Los Angeles, CA
    Posts
    234
    edit: nevermind, I was wrong.
    Last edited by Big O(1); 02-24-2011 at 12:51 AM.

  3. #3
    Join Date
    Sep 2010
    Location
    UK
    Posts
    30
    thanks Big O, but i can't see any edit link on my post page, can you help me about my topic ,

  4. #4
    Join Date
    Dec 2005
    Posts
    2,984
    And why are you trying to make a blank div that is 100&#37; width? To make a break in the page - you don't do that with a div or any other structural markup, you do it by adding appropriate margins in your css.

    I'm not sure what, if anything, this line might do (a selector followed by no rules):
    Code:
    #content .left .hdn
    but it shouldn't be in your CSS anyway.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles