CSS: no parent background on float=left child

V

Vadim

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>
 
J

Jonathan N. Little

Vadim said:
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>
 
N

Nik Coughlin

Vadim said:
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
 
V

Vadim

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....
 
J

Jonathan N. Little

Vadim said:
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;
}
 
N

Nik Coughlin

Vadim said:
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>
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,743
Messages
2,569,478
Members
44,898
Latest member
BlairH7607

Latest Threads

Top