CSS Child element losing parent background-color when floated or aligned

Question

<span class='parent'>Parent<span class='child'> and child</span></span>

If I do this:

.parent {
    background-color: green;
}

all of the text has a green background color. but if I add this:

.child {
   float: right;
}

the child no longer retains this property. I could do background-color on the child but I need the space between the two to be highlighted.

Is there a way to do this?

Jsfiddle: http://jsfiddle.net/SLWTd/

Adding overflow: hidden to the parent div element helps. http://stackoverflow.com/questions/6857120/parent-div-not-growing-with-floated-children — aditya, Apr 01 '13 at 10:36

score 6 · Accepted Answer · answered May 12 '12 at 05:44

Children never automatically inherit the parent's background color. The floated content is just on top of the parent's background. In this case, the parent's background only spans the amount of its actual inner text (which excludes the floated content).

Fortunately, with the way your structure is set up, you can explicitly set the child's background to inherit the value of its parent.

.child {
    float: right;
    background-color: inherit;
}

If you want the entire line to be that color, you need to use a block-level element. Try this:

<div class='parent'><span class='child'> and child</span>Parent</div>

CSS Child element losing parent background-color when floated or aligned

1 Answers1