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.
<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 Toon Brothers I.P. Limited. Frederick House, 2 Hardwicke Street, Dublin 1, Ireland.<br />
Phone: +353 1 8734630 || Email: <a href="mailto:info@toon.ie">info@toon.ie</a> || Website and branding: <a href="http://www.paultheillustrator.com" target="_blank">Paul Woods</a>
</div><!-- End footer -->
And the CSS:
@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