Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with a div not expanding with content

    Hi,

    I'm having a really silly, but frustrating, bug with a div not expanding with the content.

    The div in question is wrapped by a wrap div ('inside-content-wrap') and then the content is split into 2 columns ('inside-left-bar' and 'inside-right-bar') which float left of each other.

    I've been trying to fix this for hours and I know it's something really easy, I'm just blind to it after looking at it for so long. Any help would be much appreciated.

    Code:
    <body>
    <div id="main-wrap"><!-- Start main-wrap -->
    	
      		<div id="top-wrap"><!-- Start top-wrap-->
                
                        <div id="logo"><!--Start logo -->
    
                                <a href="/"><img src="/images/logo.png" width="169" height="183" alt="Toon Brother logo" border="0" /></a>
                        </div><!-- End logo -->
                        
                        <div id="top-right-wrap"><!-- Start top-right-wrap -->
                                <div id="follow-wrap"><!-- Start follow-wrap -->
                                    <div id="follow-icon-wrap"><!-- Start follow-icon-wrap -->
                                
                                            <ul id="icons">
                                                <li>
                                                    <a href="http://www.facebook.com/toonbrothers" id="facebook">
                                                        <img src="/images/home_top_facebook.png" border="0"/>
    
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="http://www.twitter.com/toonbrothers" id="youtube">
                                                        <img src="/images/home_top_twitter.png" border="0"/>
                                                    </a>
                                                </li>
                                                <li>
                                                    <a href="http://www.facebook.com/toonbrothers" id="twitter">
    
                                                        <img src="/images/home_top_youtube.png" border="0"/>
                                                    </a>
                                                </li>
                                            </ul>
                                  </div><!-- Start follow-icon-wrap -->
                                </div><!-- End follow-wrap -->
                                
                                <div id="menu-wrap"><!-- Start menu-wrap -->
                                        <ul>
                                            <li class="home"><a href="/">HOME</a></li>
    
                                            <li class="count"><a href="/count-pollen/">COUNT POLLEN</a></li>
                                            <li class="about"><a href="/about/">ABOUT US</a></li>
                                            <li class="blog"><a href="/blog/">BLOG</a></li>
                                            <li class="activities"><a href="/activities/">ACTIVITIES</a></li>
                                            <li class="contact">
                                            	<a href="/contact.php?keepThis=true&TB_iframe=true&height=440&width=439" title="" class="thickbox">CONTACT</a>
    
                                            </li>
                                        </ul>
                                </div><!-- End menu-wrap-->
                        </div><!-- End top-right-wrap -->
                        
         
                        
                </div><!-- End top-wrap -->                
            <div id="inside-wrap">
                    <div id="inside-top-wrap">
                    		<ul>
                             	<li class="tab-left-active"><a href="#">ABOUT US</a></li>
    
                              	<li class="tab-middle"><a href="#">OUR PEOPLE</a></li>
                                <li class="tab-right"><a href="#">AFFILIATES</a></li>
                            </ul>
                    </div><!-- End inside-top-wrap-->
                    
                    
                    <div id="inside-middle-wrap">
                   	  
                      	<div id="inside-content-wrap">
                      	<div id="inside-left-bar">
                        <img src="/images/heading-about-us.png" />
    
                        
                      	</div><!-- End inside-left-bar-->
                      
                      	<div id="inside-right-bar">
                          <h3> WHO ARE THE TOON BROTHERS?</h3>
                            <span class="bold">What we do</span><br />
                            Toon Brothers are a new Film Animation Production Company specialising in the creation of cartoon signature characters and storylines that deal with <span class="bold">environmental, social and other issues</span> in an entertaining fashion (Edutainment). Our target audience is primarily a 7 to 11+ age group.<br />
    
                            <br />
                            <span class="bold">Background</span><br />
                            In 1991 Mark and I created the cartoon character Ozzy Ozone which is now being used by the United Nations in 192 countries and in 26 different languages. Ozzy is also on the school curriculum in both China and India.<br />
                            <br />
                            <span class="bold">What we’re doing now</span><br />
                            Toon Brothers are currently developing their cartoon character,<span class="bold"> Count Pollen and the Quest for the Golden Nectar</span> (©2010), a proposed 11 x 2minute animated series for TV. Each episode deals with issues relating to pollination, biodiversity, climate change and other social issues. Toon Brothers have a treasure chest of cartoon characters and storylines for future development through all media platforms.<br>
    
                       </div><!-- End inside-right-bar -->
                       </div>
                    </div><!-- End inside-middle-wrap-->
                    
                    <div id="inside-bot-wrap">
                    </div><!-- End inside-bot-wrap-->
                
            </div><!-- End inside-wrap -->
                
             
             <div id="footer">
             		© 2011 <br />
    
    				Phone: +353 123444  ||  Email: <a href="mailto:#">email</a> ||  Website and branding: <a href="http://www.paultheillustrator.com" target="_blank">Paul Woods</a>
    		</div><!-- End footer -->
    And the CSS:
    Code:
    @charset "UTF-8";
    /* CSS Document */
    
    body,td,th {
    	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    	color: #666;
    	font-size: 12px;
    	height:100%;
    	line-height:13pt;
    }
    
    html{
    	height:100%;
    }
    
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	height:100%;
    	background-image:url(../images/background.jpg);
    	background-position:top;
    	background-repeat:no-repeat;
    	background-color:#000;
    	min-width:982px;
    }
    
    
    h3{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	margin-bottom:10px;
    }
    
    .bold {
    	font-weight: bold;
    	color:#211400;
    }
    
    /*----Start Body content----*/
    	
    
    #main-wrap{
    	width:982px;
    	margin:0px auto;
    	min-height:100%;
       	position:relative;
    	
    }
    
    #home-wrap {
    	padding-bottom:50px;
    	height:100%;
    }
    
    #top-wrap{
    	width:982px;
    	height:183px;
    }
    
    #logo{
    	width:169px;
    	height:183px;
    	float:left;
    	
    }
    
    #top-right-wrap{
    
    	width:813px;
    	overflow:hidden;
    }
    
    #follow-wrap{
    	width:813px;
    	height:86px;
    	background-image:url(../images/home_top_follow-us.png);
    	background-repeat:no-repeat;
    	background-position:right;
    }
    
    #follow-icon-wrap{
    	position:absolute;
    	top:35px;
    	right:27px;
    }
    
    #icons li{
    	list-style: none;
    	margin: 0;
    	display: inline;
    	width:40px;
    	margin-left:0px;
    	
    }
    
    /*-----Menu----*/
    #menu-wrap{
    	width:920px;
    	height:128px;
    	margin-left:-30px;
    	margin-top:25px;
    }
    
    
    #menu-wrap ul li{
    	list-style: none;
    	margin: 0;
    	display: inline;
    	float:left;
    	
    	
    }
    
    #menu-wrap ul li.home a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_home.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 30px 25px 40px;
    	overflow:hidden;
    }
    
    
    #menu-wrap ul li.home a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_home.png);
    	background-position:0 -76px;
    		
    }
    
    
    #menu-wrap ul li.count a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_count-pollen.png);
    	background-repeat:no-repeat;
    	width:174px;
    	height:175px;	
    	padding:25px 15px 25px 25px;
    }
    
    
    #menu-wrap ul li.count a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_count-pollen.png);
    	background-position:0 -76px;
    		
    }
    	
    #menu-wrap ul li.about a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_about-us.png);
    	background-repeat:no-repeat;
    	width:127px;
    	height:175px;	
    	padding:25px 20px 25px 20px;
    
    }
    
    
    #menu-wrap ul li.about a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_about-us.png);
    	background-position:0 -76px;
    		
    }
    
    #menu-wrap ul li.blog a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_blog.png);
    	background-repeat:no-repeat;
    	width:120px;
    	height:175px;	
    	padding:25px 34px 25px 40px;
    }
    
    #menu-wrap ul li.blog a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_blog.png);
    	background-position:0 -76px;
    		
    }
    
    #menu-wrap ul li.activities a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_activities.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    		padding:25px 20px 25px 20px;
    	
    }
    
    #menu-wrap ul li.activities a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_activities.png);
    	background-position:0 -76px;
    }
    
    #menu-wrap ul li.contact a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_contacts.png);
    	background-repeat:no-repeat;
    	width:141px;
    	height:175px;	
    	padding-left:0px;
    	padding:25px 20px 25px 30px;
    	margin-left:-8px;
    	
    	
    }
    
    #menu-wrap ul li.contact a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/top_menu_contacts.png);
    	background-position:0 -76px;
    }
    		
    		
    /*-----Middle-----*/
    
    
    #flash-container{
    	width:982px;
    	height:464px;
    	background-image:url(../images/home_middle.jpg);
    	
    	
    }
    
    
    #loading{
    	background-image:url(../images/loading.gif);
    	position:absolute;
    	left:450px;
    	top:200px;
    }
    
    
    /***/
    
    
    /*------ Bottom----- */
    #home-bot-wrap{
    	width:982px;
    	height:212px;
    }
    
    #home-bot-show{
    	width:118px;
    	height:194px;
    	background-image:url(../images/home_bot_show.png);
    	padding-right:167px;
    	padding-top:18px;
    	padding-left:42px;
    	float:left;
    }
    	
    
    #home-bot-about{
    	width:118px;
    	height:194px;
    	background-image:url(../images/home_bot_about.png);
    	padding-right:167px;
    	padding-top:18px;
    	padding-left:42px;
    	float:left;
    }
    
    #home-bot-twitter{
    	width:118px;
    	height:194px;
    	background-image:url(../images/home_bot_tweet.png);
    	padding-right:167px;
    	padding-top:18px;
    	padding-left:37px;
    	float:left;
    }
    
    #twitter-wrap{
    	width:225px;
    	height:60px;
    	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    	padding-top:0px;
    }
    
    #twitter_update_list li {
    	width: 215px;
    	list-style: none;
    	padding-top:30px;
    	margin-left:-30px;
    	font-size:12px;
    }
    
    #twitter_update_list li a {
    	color:#201300;
    	border-bottom: dotted 1px;
    	text-decoration: none;
    }
    
    #twitter_update_list li a:hover {
    	color: #201300;
    	text-decoration:underline;
    
    }
    
    /**/
    
    #home-bot-show a:link{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/read-more-white.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    	padding:10px 25px 10px 15px;
    	margin-left:-5px;
    }
    
    #home-bot-show a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/read-more-brown.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    	padding:10px 25px 10px 15px;
    }
    
    #home-bot-show a:visited{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/read-more-white.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    	padding:10px 25px 10px 15px;
    	margin-left:-5px;
    }
    
    
    #home-bot-about a:link{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/read-more-green.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    	padding:10px 25px 10px 15px;
    	margin-left:-5px;
    }
    
    #home-bot-about a:hover{
    	color:#fff;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/read-more-brown.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    	padding:10px 25px 10px 15px;
    }
    
    #home-bot-about a:visited{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/read-more-green.png);
    	background-repeat:no-repeat;
    	width:128px;
    	height:175px;
    	padding:10px 25px 10px 15px;
    	margin-left:-5px;
    }
    
    /**/
    
    /*--Inside page ----*/
    
    #inside-wrap {
    	padding-bottom:50px;
    	height:100%;
    	width:982px;
    }
    
    #inside-top-wrap{
    	width:982px;
    	height:101px;
    	background-image:url(../images/inside-middle-top.png);
    	background-repeat:no-repeat;
    }
    
    #inside-middle-wrap{
    	width:802px;
    	height:100%;
    	background-image:url(../images/inside-middle-middle.png);
    	background-repeat:repeat-y;
    	padding:10px 90px 30px 90px;
    }
    
    #inside-bot-wrap{
    	width:982px;
    	height:78px;
    	background-image:url(../images/inside-middle-bot.png);
    	background-repeat:no-repeat;
    }
    
    #menu-wrap ul li{
    	list-style: none;
    	margin: 0;
    	display: inline;
    	float:left;
    	
    	
    }
    
    #inside-content-wrap{
    	height:100%;
    }
    
    #inside-left-bar{
    	width:253px;
    	height:100%;
    	float:left;
    	
    }
    
    #inside-right-bar{
    	width:500px; 
    	float:left;
    }
    
    /*--Inside page tabs--*/
    
    #inside-wrap ul li{
    	list-style: none;
    	margin: 0;
    	display: inline;
    	float:left;
    	padding-top:25px;
    	padding-left:10px;
    	
    }
    
    /**/
    
    #inside-wrap ul li.tab-left a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 55px 25px 65px;
    	overflow:hidden;
    
    }
    
    
    #inside-wrap ul li.tab-left a:hover{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-position:0 -101px;
    		
    }
    
    
    #inside-wrap ul li.tab-left a:visited{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 45px 25px 55px;
    	overflow:hidden;
    
    }
    
    #inside-wrap ul li.tab-left-active a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 55px 25px 65px;
    	overflow:hidden;
    	background-position:0 -202px;
    }
    
    /**/
    
    #inside-wrap ul li.tab-middle a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 45px 25px 55px;
    	overflow:hidden;
    
    }
    
    
    #inside-wrap ul li.tab-middle a:hover{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-position:0 -101px;
    		
    }
    
    #inside-wrap ul li.tab-middle a:visited{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 45px 25px 55px;
    	overflow:hidden;
    
    }
    
    #inside-wrap ul li.tab-middle-active a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 45px 25px 55px;
    	overflow:hidden;
    	background-position:0 -202px;
    
    }
    
    /**/
    
    #inside-wrap ul li.tab-right a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 55px 25px 65px;
    	overflow:hidden;
    
    }
    
    
    #inside-wrap ul li.tab-right a:hover{
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-position:0 -101px;
    		
    }
    
    #inside-wrap ul li.tab-right a:visited{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 55px 25px 65px;
    	overflow:hidden;
    
    }
    
    #inside-wrap ul li.tab-right-active a{
    	font-size:18px;
    	color:#211400;
    	font-weight:bold;
    	text-decoration:none;
    	background-image:url(../images/inside-tab-left.png);
    	background-repeat:no-repeat;
    	width:123px;
    	height:175px;	
    	padding:25px 55px 25px 65px;
    	overflow:hidden;
    	background-position:0 -202px;
    }
    
    
    /*-----------------*/
    /*---- Footer Inside page----*/
    #footer{
    	position:absolute;
       	bottom:0;
       	width:100%;
       	colour:#FFF;
    	height:30px;
    	font:Arial, Helvetica, sans-serif;
    	font-size:11px;
    	text-align:center;
    	color:#FFF;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:10px;
    	padding-bottom:20px;
    	/*line-height:10pt;*/
    }
    
    #footer a{
    	color:#d5de22;
    	text-decoration:underline;
    }
    
    #footer a:hover{
    	text-decoration:none;
    }
    
    #footer a:visited{
    	color:#d5de22;
    }
    
    /*---------------*/
    Thanks!
    Paul
    Last edited by onoffpaul; 02-13-2011 at 02:48 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,849
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    #inside-content-wrap{
    	/*height:100%;*/
    overflow:auto;
    }
    See http://www.quirksmode.org/css/clearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    onoffpaul (02-13-2011)

  • #3
    New Coder
    Join Date
    Jul 2008
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Worked perfectly, thanks a million!


  •  

    Posting Permissions

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