Element expanding but not filling in with background color

I am building my first e-commerce store. So far so good. I have data being read in from a database and populating the "content" area. The issue I am having is within the middle-layout, I have a background color set to #ebe9e9 but it is not covering the middle content area (as seen in the two screen shot's provided). The middle content area is expanding based on what is being loaded but the background color is not being applied. I am in hopes someone can shed some light on what the issue is-I think i've stared at it to long.

Both CSS and HTML code is provided.

Thanks,
neo
/*********** CSS ************/
/*******************************************************************************************************************
* The following is the main content consistent on all pages
*******************************************************************************************************************/
body {
	font: 12px/1.5 "Trebuchet MS",Arial,sans-serif;
	background:url(../../images/layout/bg-top.jpg) no-repeat scroll 50% 0 #FFFFFF;
	color:#333333;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
}

.noscript {
    display: block;
    margin: 10px 0;
    padding: 10px 10px 10px 40px;
    background: #fff url(../../images/alert-symb.png) no-repeat left center;
    border: 2px solid red;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-size: 13px;
    font-family: sans-serif;
    font-weight: bold;
    font-style: italic;
    color: red;
}

a img{
	border:none;
}

.clear {
    clear: both;
}


h1,h2 {
    margin: 14px 0 20px 0;
    padding-left: 26px;
    font-size: 14px;
    font-weight: bold;
    /*text-transform: capitalize;*/
    color: #ffb101;
    background: url(../../images/H1_bg.gif) no-repeat bottom left;
    float: left;
    display: inline;
    clear: both;
}

h3 {
    margin: 0 0 11px 0;
    font-size: 11px;
    font-weight: bold;
    text-transform: capitalize;
    color: #919191;
    float: left;
    display: inline;
    clear: both;
}

p {
    margin: 15px 0;
    font-size: 11px;
    color: #898989;
}

a:link,
a:visited {
    font-size: 11px;
    color: #ffb101;
    text-decoration: underline;
}

a:hover {
    color: #000;
}

a:active,
a:focus {
    color: #000;
}

.rectangular,
.rounded-dark {
    border: #bdc3cf solid 1px;
    background: transparent;
    float: left;
    display: inline;
}

.rounded-light{
    border: #717171 solid 1px;
    background: transparent;
    float: left;
    display: inline;
}

.float-left {
    float: left !important;
    display: inline;
}

.float-right {
    float: right !important;
    display: inline;
}

#page {
  position:relative;
}

#menuAndBannersHolder {
	float:left;
}

#menuAndBannersHolder .adv-banner {
	padding-bottom:10px;
}

#primaryContent .text-block h4 {
	font-size:12px;
}

.wrapper {
	margin:0 auto;
	width:1200px;
	text-align:left;
}

#layout-top {
	background:url(../../images/layout/bg-top-sides.png) repeat-x center bottom transparent;
}

#layout-middle {
	background:url(../../images/layout/bg-middle-sides.jpg) repeat-x center top #ebe9e9;
	height:74px;
}

#layout-bottom {
	clear:both;
	background:url(../../images/layout/bg-footer.jpg) repeat-x center top #ffffff;
	padding:60px 0 0 0;
}
/********************************
*********************************
*********** HTML ****************
*********************************
*********************************/
    <body class="<?php echo WHERE_WE_NOW?>">
        <div id="page">
        	<div id="layout-top">
    			<div class="wrapper">
        			<div id="header">
                    	<div id="paint-splatter"></div>
                        <div id="search-bar">
                        	<?php  $components->default->adv_search(array()); ?>
                        </div>
                    	<a id="logo" href="<?php echo url::base()?>"  title="###"><h1>###</h1></a>
                        <div id="service">
                        	<ul id="userMenu">
                            	<?php $components->default->user_menu(array('current_page'=>@$current_page))?>
                        	</ul>
        				</div>
                    </div>
               </div>        
            </div>
            <div id="layout-middle">
    			<div class="wrapper">
            		<div id="content">
						<?php $components->other->noscript(array('noscript_mess'=>"Javasript is currently not supported/disabled by this browser. Please enable JavaScript for correct appearance."))?>
                		<?php echo $content ?>
            		</div>
				</div>
            </div>
            <div id="layout-bottom">
                <div id="footer">
                    <?php $components->other->footer_menu(array('home' => true, 'current' => isset($current)?$current:'', 'current_page'=>@$current_page))?>
                    <div id="copyRight">
                        <?php echo "<p>Copyright &copy 2007-".date('Y')." ##.com. A <a href='http://##.com'>##.com</a> company. All Rights Reserved.</p>"; ?>
                    </div>
                </div>
            </div>
            <script type="text/javascript" src="<?php echo FRONTEND_DIR?>/js/jquery.layout-footer-menu.js"></script>
        </div>
		<?php $components->script->text_block(array('text' => $page->getGlobalText('GLOBAL_BOTTOM_SCRIPT')))?>
		<?php $components->script->text_block(array('text' => $page->getText('BOTTOM_SCRIPT')))?>
    </body>
</html>

Open in new window

issue.jpg
LVL 1
MorganAsked:
Who is Participating?
 
Chris StanyonCommented:
Hi neonate,

Add overflow:hidden to your #layout-middle rule.

0
 
Dave BaldwinFixer of ProblemsCommented:
One of the oddities I've run into is that if you give a div a height and a background color, it only fills to the defined height.  Try eliminating "height:74px;".
0
 
rfportillaCommented:
If what DaveBaldwin says doesn't fix it, try posting on the web so that we can actually see it in a browser.  

Also, if you are unfamiliar with them, chrome and IE both have developer tools for inspecting and modifying the live document.  You can use them to try different things to see where the problem is.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
MorganAuthor Commented:
Davebaldwin:
It won't do it when the height decloration is removed, I added it there just to be sure the background was there.

rfporttilla:
 I use fire bug for my developer tool. The middle-layout is there but just does not expand.

I've made the site live at: www.totaleeyoustore.com
0
 
MorganAuthor Commented:
ChrisStanyon:

Thank you, thank you! That did the trick! Have any idea why that worked?

Thanks,
neo
0
 
Chris StanyonCommented:
@neonate

Your #layout-middle div only contained elements that were floated (or had no content), so they were taken out of the document flow. This meant that the #layout-middle div had nothing inside of it that could force a height. Applying overflow:hidden (or auto) to it forces it to wrap the floated divs and extend it's height to that of the floated DIVS.

Pleased it solved your problem - add this one to your web design toolbox - it'll come in handy time and time again :)

0
 
rfportillaCommented:
Did you fix this?  It seems to be working on the site you have posted.  Or am I missing it?
0
 
MorganAuthor Commented:
Thank you Chris! So is this always the case when floated elements are involved?

rfportilla:

Yes it is working now :).

To ALL:

I will be posting a new question here in a min regarding the header. The issue there is I have to apply an overflow:visible command in order for the search drop down box to be seen, otherwise it displays behind the layout-middle section. But applying the overflow:visible command causes the vertical scroll bard to appear....so now I'm trying to figure out how to fix that :)
0
 
MorganAuthor Commented:
If anyone wants to take a crack at the new problem the title of the question is: Overflow:visible has to be used, but causes vertical scroll
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.