[thelist] CSS: div background color discrepancy

Wed Dec 6 19:10:39 CST 2006

Ahh! I missed the float on the a element. That changes things a lot.

When you float something, you take it out of the document flow so its
containing element collapses. What you need to do is float the containing
element. Now this sounds as if you might have to then float the next
containing element and so on but you can limit this.

When you float within a float, the inner floated element regains its height
(hard to explain, but that's the gist of it).

Try this: remove the float on the a element. Float left the li, the ul and
the div. Put the background color on the div and set the width of the div to
100%.

The following code might help.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
div {
    background-color: #990000;
    width: 100%;
    float: left;
}
div li {
    background-color: #99FF00;
    float: left;
    margin-right: 20px;
    padding-right: 20px;
    padding-left: 20px;
    width: 150px;
    text-align: center;
}
div ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
-->
</style>
</head>

<body>
<div>
  <ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
    <li><a href="#">link 3   </a></li>
  </ul>
</div>
</body>
</html>

On 06/12/06, Joel D Canfield <joel at spinhead.com> wrote:
>
> > The simple fix is to transfer the
> > background color from #navcontainer ul to a new rule for just
> > #navcontainer
>
> sorry; should have mentioned that I tried that. sorry sorry. made it
> 100% width, bg color and all; no joy. I've put that back in again, for
> the current fooling around.
>
> if I add a border to the new navcontainer declaration, it appears
> *above* the ul, not around it. seems like the ul is following the
> navcontainer, not being inside it
>
> I'm feeling dumber. I kinda thought I'd get CSS, but despite studying
> the box model et al, it still doesn't always behave the way I expect.
>
> joel
> --
>
> * * Please support the community that supports you.  * *
> http://evolt.org/help_support_evolt/
>
> For unsubscribe and other options, including the Tip Harvester
> and archives of thelist go to: http://lists.evolt.org
> Workers of the Web, evolt !
>

-- 
Website: http://jrickards.ca
Blog: http://pen-and-ink.ca
E-mail: julian dot rickards at gmail dot com