CSS: no parent background on float=left child

Discussion in 'HTML' started by Vadim, May 17, 2006.

  1. Vadim

    Vadim Guest

    Hi!
    Why I can't see the parent background on child divs?
    Thanks

    <div id="Chrono_Actions">
    <div class="Last_Transaction">aaa</div>
    <div class="Last_Comments">bbb</div>
    </div>

    <style>
    #Chrono_Actions
    {
    background-color: #ecf6d9;
    }

    #Chrono_Actions .Last_Transaction
    {
    float: left;
    }

    #Chrono_Actions .Last_Comments
    {
    float: right;
    }
    </style>
     
    Vadim, May 17, 2006
    #1
    1. Advertising

  2. Vadim wrote:
    > Hi!
    > Why I can't see the parent background on child divs?
    > Thanks
    >
    > <div id="Chrono_Actions">
    > <div class="Last_Transaction">aaa</div>
    > <div class="Last_Comments">bbb</div>
    > </div>
    >
    > <style>
    > #Chrono_Actions
    > {
    > background-color: #ecf6d9;
    > }
    >
    > #Chrono_Actions .Last_Transaction
    > {
    > float: left;
    > }
    >
    > #Chrono_Actions .Last_Comments
    > {
    > float: right;
    > }
    > </style>
    >


    Because div "Chrono_Actions" has no content. Once you make the child
    div's float they are no longer part of rendering flow of the container.
    Prove it by adding some content....

    div id="Chrono_Actions">
    <div class="Last_Transaction">aaa</div>
    <div class="Last_Comments">bbb</div>
    Now you will see the background...
    </div>
    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 17, 2006
    #2
    1. Advertising

  3. Vadim

    Nik Coughlin Guest

    Re: no parent background on float=left child

    Vadim wrote:
    > Hi!
    > Why I can't see the parent background on child divs?
    > Thanks
    >
    > <div id="Chrono_Actions">
    > <div class="Last_Transaction">aaa</div>
    > <div class="Last_Comments">bbb</div>
    > </div>
    >
    > <style>
    > #Chrono_Actions
    > {
    > background-color: #ecf6d9;
    > }
    >
    > #Chrono_Actions .Last_Transaction
    > {
    > float: left;
    > }
    >
    > #Chrono_Actions .Last_Comments
    > {
    > float: right;
    > }
    > </style>


    Clear the floats
     
    Nik Coughlin, May 17, 2006
    #3
  4. Vadim

    Vadim Guest

    Thanks for your answer, but this didn't work :(
    After adding text to my arent div I get my background only on it, but
    not on children divs....
     
    Vadim, May 18, 2006
    #4
  5. Vadim

    Vadim Guest

    Re: no parent background on float=left child

    Yes, it works wihout floats, but I need them for my functionality....
     
    Vadim, May 18, 2006
    #5
  6. Vadim wrote:
    > Thanks for your answer, but this didn't work :(
    > After adding text to my arent div I get my background only on it, but
    > not on children divs....
    >

    Because I misread your question, if you look at the spec you will see
    that backgound color is *not* inherited

    http://www.w3.org/TR/CSS21/colors.html#propdef-background-color

    you must explicitly define it so, change your CSS to:

    #Chrono_Actions,
    #Chrono_Actions DIV
    {
    background-color: #ecf6d9;
    }



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, May 18, 2006
    #6
  7. Vadim

    Vadim Guest

    Ok. Thank you!
     
    Vadim, May 18, 2006
    #7
  8. Vadim

    Nik Coughlin Guest

    Re: no parent background on float=left child

    Vadim wrote:
    > Yes, it works wihout floats, but I need them for my functionality....


    I meant use the css property clear. Try this.

    <div id="Chrono_Actions">
    <div class="Last_Transaction">aaa</div>
    <div class="Last_Comments">bbb</div>
    <div style="clear: both;"></div>
    </div>
     
    Nik Coughlin, May 19, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. news.frontiernet.net
    Replies:
    2
    Views:
    425
    news.frontiernet.net
    Apr 16, 2004
  2. bd
    Replies:
    0
    Views:
    634
  3. Carsten Fuchs
    Replies:
    45
    Views:
    1,558
    James Kanze
    Oct 8, 2009
  4. Noel Dolan
    Replies:
    0
    Views:
    238
    Noel Dolan
    Jul 18, 2004
  5. Bitswapper
    Replies:
    5
    Views:
    149
    Prasad, Ramit
    Aug 27, 2013
Loading...

Share This Page