Two divs overlap IE7

Discussion in 'CSS' started by Om ji Kesharwani, Mar 12, 2010.

  1. #1
    <div id="maincontent">
    		
    		
    			<div class="rbroundbox">
    				<div class="rbtop"><div></div></div>
    					<div class="rbcontent">
    						<p>Making the right decisions in selecting a good and reliable manufacturer of hand made carpets and rugs is as big a decision as choosing a business in first place. <strong>Tahumo</strong>&reg; Exports offers you the opportunity to associate yourself with the company and experience the difference.</p>
    						<p><strong>Tahumo</strong>&reg; Exports is one of the best known names for making hand made quality rugs & carpets. Covering a vide range in area rugs, hotel carpets, corridor carpets, lobby carpets, banquet carpets, over sized carpets, custom made rugs/carpets, rugs for children’s room, picture rugs, designer carpets/rugs, wall to wall carpets and boat/marine carpets, the company has  earned a reputation and a name for itself. </p>
    						<p>Tahumo's carpets have a wide selection of products to satisfy all tastes and moods, representing exceptional value and can be chosen in complete confidence by anyone seeking the very best. Our range of product includes –</p>
    						<p>Handloom – woolen, over twisted, cut & loop, wool & silk, low & high</p><p>Broadloom - woolen, over twisted, cut & loop, wool & silk, low & high</p>
    						<p><strong>Hand tufted</strong> – Modern hand tufted, contemporary hand tufted, traditional hand tufted, transitional hand tufted, Persian hand tufted, woolen hand tufted, over twisted hand tufted, high & low hand tufted, loop & cut hand tufted. Hand tufted Aubusson</p>
    						<p>Hand knotted – plain hand knotted, Persian hand knotted, Modern hand knotted </p><p>Nepalese/rod weave – Modern Nepalese, Transitional Nepalese </p><p>Shaggy  - woolen shaggy, leather shaggy, polyester shaggy, assorted shaggy rugs</p>
    						<p><strong>Leather carpets</strong> – hair–on leather carpets, Printed leather carpets, Leather carpets in natural colours, Natural Hair on leather carpets</p>
    						<p>Rag rugs -	assorted rag rugs, plain rag rugs </p>
    						<p>Durries – woolen & cotton durries </p>
    						<p>Prayer rugs – hand made prayer rugs, prayer rug rolls, prayer rugs for mosque, prayer mats  </p>
    						
    					</div><!-- /rbcontent -->
    				<div class="rbbot"><div></div></div>
    			</div><!-- /rbroundbox -->
    
    
    		</div>
    	</div>
    	<div style="clear: both;">&nbsp;</div>
    	<div id="footer">
    	Developed &amp; Hosted By: <a href="http://www.webstockist.com">Web Stockisk</a>
    	</div>
    HTML:
    CSS
    
    
    body {
    	margin: 0;
    	padding: 0;
    	background: url(images/hardwired.gif);
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #787878;
    }
    
    #wrapper {
    	width: 1000px;
    	margin: 0 auto;
    	padding: 0;
    	border: none;
    	background: #570202;
    	height: 500;
    }
    
    /* Header */
    
    #header {
    	width: 1000px;
    	height: 209px;
    	margin: 0 auto;
    }
    
    /* Menu header*/
    
    #menuhead {
    	width: 1000px;
    	height: 32px;
    	margin: 0 auto;
    	padding: 0;
    
    }
    
    #content{
    	height: 300px;
    }
    
    /* Menu left*/
    
    #menu {
    	width: 176px;
    	height: 300px;
        float: left;
    	padding: 0;
    	background: #f8989a;
    }
    
    #menu ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;
    	line-height: normal;
    }
    
    #menu li {
    	float: left;
    	width: 177px;
    	height: 30px;
    	background: url(images/cat_bg.jpg) no-repeat;
    	color: white;
    	font-weight: bold;
    }
    
    #menu a {
    	display: block;
    	padding: 0px 20px;
    	border: none;
    	text-decoration: none;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 13px;
    	color: #ffffff;
    	font-weight: bold;
    }
    
    
    #menu a:hover {
    	text-decoration: underline;
    }
    
    #maincontent {
    	width: 820px;
        float: right;
    	padding: 0;
    	/*background: #f8989a;*/
    }
    /* set millions of background images */
    .rbroundbox { background: url(nt.gif) repeat; }
    .rbtop div { background: url(tl.gif) no-repeat top left; }
    .rbtop { background: url(tr.gif) no-repeat top right; }
    .rbbot div { background: url(bl.gif) no-repeat bottom left; }
    .rbbot { background: url(br.gif) no-repeat bottom right; }
    
    /* height and width stuff, width not really nessisary. */
    .rbtop div, .rbtop, .rbbot div, .rbbot {
    width: 100%;
    height: 7px;
    font-size: 1px;
    }
    .rbcontent { margin: 0 7px; }
    .rbroundbox { width: 98%; margin: 1em auto; }
    
    
    
    #footer{
     	
    	margin-top: 0px;
    	padding-top: 20px;
    	padding-bottom: 10px;
    	line-height: normal;
    	font-size: 9px;
    	text-transform: uppercase;
    	text-align: center;
    	font-weight: bold;
    	background: #6C1717;
    }
    
    #footer a {
    	color: #969696;
    }
    HTML:
    Code is having problem with IE7 . when the text content inside the maincontent div tag increase it overlap on on footer div tag.
    My requirement is : footer should shift downward when text content increases.
     
    Om ji Kesharwani, Mar 12, 2010 IP
  2. sylverCode

    sylverCode Member

    Messages:
    74
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    43
    #2
    What else does your highness require?
     
    sylverCode, Mar 13, 2010 IP