SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    height:100% - problem

    Hello,

    My first tableless layout, can't figure it out, how to fix the height problem, I read the FAQ, and saw probably every web site regarding css, but still no luck

    here it is: http://spaiz.net/file/css/

    Code:
    html,body{height:100%;margin:0;padding:0}
    body{
    	background:#fff url(imgs/top-bg.gif) top repeat-x;
    	text-align:center;
    	color:#000;
    	font-family:"Lucida Grande",Verdana,Geneva,Tahoma,Arial,sans-serif;
    	font-size:70%;
    	}
    
    #wrap{
    	height:100%;
    	width:750px;
    	}
    
    #logo{
    	float:left;
    	height:203px;
    	width:220px}
    
    #headers{ /* for image rotation using JS */
    	height:203px;
    	width:521px;
    	}
    
    #left{
    	float:left;
    	text-align:left;
    	width:220px;
    	}
    
    #center{
    	height:100%;
    	background:url(imgs/dot.gif) left top repeat-y;
    	text-align:justify;
    	margin-left:220px;
    	}
    the height:100% works, thought it creates additional space in the bottom of the page, how do I get rid of it? (I tried to use margin-top:-203px - didn't help)

    Thanks

    David.

  2. #2
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Leave the 100% heights out and let the content control the height
    PS your flow model haze clearing problems

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    
    <head>
    <title>page</title>
    
    <style type="text/css">
    
    html,body{height:100%;margin:0;padding:0}
    
    body{
    	background:#fff url(imgs/top-bg.gif) top repeat-x;
    	text-align:center;
    	color:#000;
    	font-family:"Lucida Grande",Verdana,Geneva,Tahoma,Arial,sans-serif;
    	font-size:70%;
    	}
    	
    #wrap,.wrap{
    width:750px;
    margin:0 auto;
    }
    
    .wrap{
    border:1px solid #000000;
    border-width:0 1px 1px 1px;
    background:url(imgs/dot.gif) 223px repeat-y;
    }
    
    #wrap{
    background: url(imgs/top-bg.gif) top repeat-x;
    	/*height:100%;*/
    	}
    
    #logo{
    	float:left;
    	height:203px;
    	width:220px}
    
    #headers{
    	align-right;
    	height:203px;
    	width:521px;
    	}
    
    #left{
    	float:left;
    	text-align:left;
    	width:220px;
    	}
    
    * html #center{height:100%;}
    
    #center{
    	/*height:100%;
    	background:url(imgs/dot.gif) left top repeat-y;*/
    	height:auto;
    	text-align:justify;
    	margin-left: 220px;
    	}
    	
    
    #LeftMenu a{color:#485a76;white-space:nowrap;display:block;height:14px;border:1px #fff solid;border-bottom:1px #edf3f6 solid;margin:3px;padding:2px;padding-left:16px}
    #LeftMenu a:hover{color:#000;text-decoration:none;border:1px #a2d2e6 solid}
    a img.lm{background-color:#95aeba}
    a:hover img.lm{background-color:#000}
    img.LMon{background-color:red}
    .MenuDotBr{background:url(imgs/dot.gif) center repeat-x;height:1px;display:block;padding-top:22px}
    
    a.li{padding-left:10px;color:#8b8a8a;text-decoration:none;font-size:90%;height:18px;display:block}
    a:hover.li{padding-left:7px;color:blue;text-decoration:underline}
    div,p{margin:0;padding:0}img{border:0px}
    
    .fcl{clear:both;height:1px;overflow:hidden;/*margin-top:-1px;*/}
    </style>
    </head>
    
    <body>
    
    <div class=wrap>
    <div id=wrap>
    
    <div id=logo><br><br><b>text</b><br></div>
    <div id=headers><!--script language="javascript" type="text/javascript" src="header.js"></script--></div>
    <br>
    
    <!---------------LEFT--><div id=left>
    <div style=padding:20px id=LeftMenu>
    Menu:
    <a href='#'><img class=lm src="imgs/lm.gif">Link 1</a>
    <a style=color:red><img class=LMOn alt="" src="imgs/lm.gif">Link 2</a>
    <a href='#'><img class=lm src="imgs/lm.gif">Link 3</a>
    <a href='#'><img class=lm src="imgs/lm.gif">Link 4</a>
    <div class=MenuDotBr><img src="#" alt="" height=1 width=1></div>
    
    </div>
    
    <div style=padding:20px><br><br><a class=li href="#">More Links</a></div>
    
    </div><!--LEFT--------------->
    
    
    <div id=center><div style=padding:20px>
    <h4>Internet</h4><br>
    text text text...
    
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    
    </div>
    
    </div>
    <div class="fcl"></div>
    </div>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Apr 2005
    Posts
    314
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    David - Hi,

    I had a quick glance at your CSS code and changed the #wrap height to nothing, in fact I deleted it and the height problem seems to have gone away.

    Could be what is causing your site to appear with extra padding at the bottom, let me know how you get on.

  4. #4
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    all4nerds, what you suggested works much better for me

    Thanks a lot!!

  5. #5
    SitePoint Enthusiast Spaiz's Avatar
    Join Date
    May 2004
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    mattih5, thanks, but when you remove the #wrap height to nothing - the doted line is controlled by the amount of the content in #center.

    What all4nerds suggested "background:url(imgs/dot.gif) 223px repeat-y;" is probably the best way


Bookmarks

Posting Permissions

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