WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Float left breaks background colour

Reply
  Thread Tools Display Modes
Old 10th August 10, 05:40 PM   #1
Cablestein
WLC Member
 
Join Date: Aug 2010
Posts: 1
Default Float left breaks background colour

Essentially I'm creating a 'drop-up' menu without javascript.

Here is my test page:
http://38.99.165.179/kalle/cssmenu/index3.html

PROBLEM:

I am using 'float: left' to arrange my main menu items horizontally.

With 'float: left' it seems like I lose control over the #menu_container background color. It's supposed to be a shade of red. If I delete 'float: left', I regain control over the container background, and the shade of red appears.

Why is this happening?

This problem doesn't seem to exist if I use 'display: inline' instead of 'float: left', to sort my main menu items horizontally. BUT 'display: inline' causes other issues, and so for various reasons I'd like to try to keep using float: left.

Here is my code:

Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>

<style>

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: #555555;
	color: #EEEEEE;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

#top {
	width: 100%;
	height: 80%;
	text-align: center;
}


/* MENU BAR */

#menu_container {
	width: 100%;
	margin: 0 auto;
		
	/* doesn't work!!! */
	background-color: #CC6666;
}

   
#menu {
	font-size: 16px;
}

#menu a {
	text-decoration: none;
	color: #FFFFFF;
}

#menu ul {
	
}

#menu li {
	position: relative;
	display: block;
	height: 1.2em;
	margin-right: 50px;
	text-align: left; 



/* PROBLEM */
/* With 'float: left', the background color disappears for #menu_container. */
/* Disable 'float: left' here, and you see what I mean. */
/* Why does this happen?

	float: left;

/* The 'float: left' is needed to sort my main menu items horizontally. If I use the alternate way 'display: inline', then my drop-up menus don't automatically attach themselves to the correct spot. I want to avoid manually positioning them. */

}

#menu li ul {
	background-color: #BBBBBB;
	position: absolute;
	bottom: 1.2em;
	display: none;
	list-style: none;
	width: 110px;
	padding: 0px;
}

#menu li:hover ul {
	display: block;
	white-space: nowrap;
}

#menu li:hover ul li {
	display: block;
}

#menu li:hover ul li:hover {
	background-color: #777777;
}

/* END - menu bar */


#bottom {
	margin-top: 70px;
	height: 150px;
	text-align: center;
	clear: both;
	padding-top: 2px;
	background-color: #222222;
}


</style>

</head>


<body>


<div id="top">

	content

</div>

<div id="menu_container">
   
    <ul id="menu">
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Anything</a></li>
                <li><a href="#">Needed</a></li>
                <li><a href="#">Here?</a></li>
            </ul>
        </li>
        <li><a href="#">Something 1</a>
            <ul>
                <li><a href="#">Imagine</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Possibilities</a></li>
                <li><a href="#">of Magic!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 2</a>
            <ul>
                <li><a href="#">Taste</a></li>
                <li><a href="#">the</a></li>
                <li><a href="#">Sensation</a></li>
                <li><a href="#">of the Bubbles</a></li>
                <li><a href="#">on your Tongue!</a></li>
            </ul>
        </li>
        <li><a href="#">Something 3</a></li>
        <li><a href="#">Contact</a></li>
    </ul>


</div>


<div id="bottom">

	content

</div>

</body>
</html>
Cablestein is offline   Reply With Quote
Old 11th August 10, 12:00 AM   #2
sfadler
WLC Member
 
Join Date: Aug 2010
Location: Saint Louis Missouri
Posts: 47
Default Re: Float left breaks background colour

When using floats there is a hack you can use to regain the background color in the parent element but because of the way it works its not usable if you're working with drop down menus.

Just so you know the hack is

Code:
#parentElement { height:1%; overflow:hidden; }
The overflow value is what keeps you from using this to fix your current issue. You can however set an explicit height having a similar effect minus the liquid height. Pardon that I recoded everything your coding style is significantly different than mine and the sticky footer wasn't working in IE which is fixed now.

Tested and working in IE8, Fire Fox, and Chrome

Made you a blog post here and you can download the source here
I also made a different version of the popup menu with a horizontal styling which you can download here

XHTML Code:

Code:
<div id="wrapper">
  <div id="top">
    <p>Quantitative analysis of all the key ratios has a vital role to play in this in a collaborative, forward-thinking venture brought together through the merging of like minds. Combined with optimal use of human resources, whether the organization's core competences are fully in line, given market realities by moving executive focus from lag financial indicators to more actionable lead indicators. Building a dynamic relationship between the main players.</p>
  </div>
  </div>
  <div id="bottom">
  <div id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Something 1</a>
        <ul>
          <li><a href="#">Something 1-1</a></li>
          <li><a href="#">Something 1-2</a></li>
          <li><a href="#">Something 1-3</a></li>
          <li><a href="#">Something 1-4</a></li>
        </ul>
      </li>
      <li><a href="#">Something 2</a>
        <ul>
          <li><a href="#">Something 2-1</a></li>
          <li><a href="#">Something 2-2</a></li>
          <li><a href="#">Something 2-3</a></li>
          <li><a href="#">Something 2-4</a></li>
        </ul>
      </li>
      <li><a href="#">Something 3</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
    <p>In a collaborative, forward-thinking venture brought together through the merging of like minds. By moving executive focus from lag financial indicators to more actionable lead indicators, whether the organization's core competences are fully in line, given market realities big is no longer impregnable. To ensure that non-operating cash outflows are assessed.</p>
  </div>
CSS Code

Code:
* { margin:0; padding:0;  }
html, body {height: 100%;}
body { background:#555; font:16px Verdana, Arial, Helvetica, sans-serif; }
#wrapper { min-height: 100%; }
#top { overflow:auto; padding-bottom: 120px; }
#bottom { position: relative; margin-top: -120px; /* negative value of footer height */ height: 120px; clear:both; background:#222; } 

p { color:#FFF; margin:10px 0; padding:0 10px; }

#menu { background:#CC6666; height:40px; }
#menu ul { width:100%;  }

#menu li { float:left; list-style:none; position:relative;}
#menu li a { padding:10px; display:block; color:#FFF; text-decoration:none; }

#menu ul ul { position:absolute; top:-152px; left:-9999px; width:140px; background:#BBB; }
#menu ul ul a:hover { background:#777; }
#menu li:hover ul { left:0; }
When I was building the new page I noticed that you didn't define the proper document declaration, the drop down menu was not working without these.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
sfadler is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:06 AM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.