SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems with height in ie ...

    hey
    i have 3 divs, like this:
    <div id="topcontainer">
    <div id="topmaincol"></div>
    <div id="topleftcol"></div>
    </div>

    they have this css:
    Code:
    #topcontainer {
    	width: 800px;
    	text-align: left;
    	margin-left: auto;
    	margin-right: auto;
    	background: url(../images/topwrapper_bg.png);
    	height: 100%
    }
    #topleftcol {
    	width: 241px;
    	float: left;
    	position: relative;
    	background: url(../images/cont_top_left_bg.png) repeat-y;
    	margin-bottom: 4px;
    	overflow: hidden;
    }
    #topmaincol {
    	background: url(../images/topmaincol_bg.png) repeat-y;
    	float: right;
    	display: inline;
    	position: relative;
    	width: 559px;
    	margin-bottom: 0;
    	overflow: hidden;
    	height: 100%;
    	margin-bottom: 4px;
    }
    Now the problem is that, when one of the oinner divs, bigger is then the other, the smaller one doesn't take it's height in FF.
    So i thought fixing this by giving the top container a bg (the left, and main bg next to each other, in 1 longer bg of 1px height).
    But this still doesn't fix my problem ...
    when one of those boxes is smaler, it doesn't enlarge, and the div underneeth takes it's place ...

    how it should be:
    http://img216.imageshack.us/img216/8655/goodpp5.gif

    how it is:
    http://img157.imageshack.us/img157/4664/badvh4.gif
    thanks

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

    a header ? give left right a height ?

    PS you have to clear the floats in FF NS Moz OP, and give IE haslayout

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>12345 12345 12345 12345 12345</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	*{padding:0;margin:0;}
    	
    	head+/**/body .fc:after{
    	content:"."; 
    	display:block; 
    	height:0;
    	clear:both; 
    	visibility:hidden;
    	}
    	
    	/* mac hide \*/
    	* html .fc{height:1%;}
    	/* End hide */
    	
    	#topcontainer{
    	width:800px;
    	text-align:left;
    	margin:0 auto;
    	background:#ccffff url(../images/topwrapper_bg.png);
    	}
    	
    	#topleftcol,#topmaincol {margin-bottom:4px;height:100px;}
    	
    	#topleftcol{width:241px;float:left;background:#ccffcc url(../images/cont_top_left_bg.png) repeat-y;}
    	
    	#topmaincol{width:559px;float:right;background:#ffffcc url(../images/topmaincol_bg.png) repeat-y;}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	*+html{height:99%;}
    	*+html .fc{zoom:1;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div id="topcontainer" class="fc">
    
    <div id="topmaincol"></div>
    <div id="topleftcol"></div>
    
    </div>
    
    </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it worked for 50%
    the boxes are fixed, but now my header is gone (with the banner ...)
    any idea how to fix that ?
    i don't understand much of the css you gave me :
    thanks

  4. #4
    SitePoint Addict
    Join Date
    Aug 2005
    Location
    Belgium
    Posts
    387
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    problem solved
    thanks m8
    the head and ie hack where not necessary


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
  •