CODEWITHSUNDEEP
htmlcssbackground
E Reading
E Reading

Reputation: 43

div background not showing

This was going to be the footer for a page. I have a div with a background colour and 2 paragraphs with the same background colour as the div . One paragraph is floated left the other right. The only place I see the background colour is directly behind the text of the paragraph.

While I did find a work around with tables, I would like to know why it is appearing this way. And why does the div appear to have no background colour when Inspect element says otherwise?

The code

<!DOCTYPE html>
    <html>
    <head>    
        <style>                                                                                           

            div.holder{
                position:absolute;
                margin-left:auto;
                margin-right:auto;
                width:65%;
            }            

             div.footer{
                position:relative;
                width: 100%;
                background-color: #00A2E8;
            }  

            div.footer p{
                background-color: #00A2E8;
                overflow: hidden
}
           </style>                                                                                                                                                                                                                                                         
    </head>
    <body >
    <div class="holder"> 
        <div class="footer" >
            <p style="float:left; ">
                gdfgdfgdfgdffgdf</br>
                dfgdfgdfgd  </br>   
                dgdfgdfg    ,</br>
                dfgdfgdf    </br>
                gdfgdfgf    </br>
                </br>
            </p>

            <p style="float:right;">
                <span>Phone:</span> 555555555</br>
                <span>FAX:</span> 55555555555</br>
                <span>Email:</span>[email protected]</br>
                <span>Website:</span>example.com</br>

        </div>
    </div>
    </body>
    </html>

Upvotes: 4

Views: 149

Answers (6)

Anonymous
Anonymous

Reputation: 10216

You're using position: absolute; to div.holder and If you use that declaration on div.footer (instead of relative positioning) then background-color: #00A2E8; of your div.footer will work.

JSFiddle DEMO

div.holder {
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    width:65%;
}
div.footer {
    position:absolute;
    width: 100%;
    background-color: #00A2E8;
}
div.footer p {
    background-color: #00A2E8;
    overflow: hidden;
}

This is because it establishes a new block formatting context.

Absolutely positioned elements i.e. elements where position is absolute or fixed establishes a new block formatting context (in short: BFC)

This is documented in the spec:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

A block formatting context is:

it is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.
- Mozilla MDN

The spec states:

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats

Hence the container creating the BFC would contain all the float elements inside it.

Also, MDN has clarified this:

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

You should use CSS clear property that specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.

When you apply CSS clear property to floating elements, it moves the margin edge of the element below the margin edge of all relevant floats. by Mozilla MDN

JSFiddle DEMO

You can use an extra <div style="clear: both;"></div> right before your closing div.footer tag.

Upvotes: 3

Emily
Emily

Reputation: 316

You need to change the attribute position for the footer to fixed. And it's not necessary to have a background color for the elements as they are contained in the footer block.

div.footer{
    margin:0;
    position:fixed;
    width: 100%;
    background-color: #00A2E8;
}  

div.footer p {
    overflow: hidden;
}

Hope it works for you :)

Upvotes: 0

Patrick W. McMahon
Patrick W. McMahon

Reputation: 3561

remember floating elements add no height to the parent element. remove the floats or add a height. for what your doing you don't need floats you can use positioning absolute left and right. but if you want to use floats add a height to your footer element. see example:

<!DOCTYPE html>
<html>
<head>    
    <style>                                                                                           
div.holder{
 position:absolute;
margin-left:auto;
margin-right:auto;
width:65%;

}            

 div.footer{
 position:relative;
width: 100%;
background-color: #00A2E8;

}  
div.footer p{
background-color: #00A2E8;
overflow: hidden
height:100px;
       </style>                                                                                                                                                                                                                                                         
</head>
<body >
<div class="holder"> 



<div class="footer" >

<p style="float:left; ">gdfgdfgdfgdffgdf</br>
dfgdfgdfgd  </br>   
dgdfgdfg    ,</br>
dfgdfgdf    </br>
gdfgdfgf    </br>
</br>
</p>

    <p style="float:right;">    <span>Phone:</span> 555555555</br>
            <span>FAX:</span> 55555555555</br>
            <span>Email:</span>[email protected]</br>
    <span>Website:</span>example.com</br>


</div>

</div>
</body>
</html>

Upvotes: -1

Ramiz Wachtler
Ramiz Wachtler

Reputation: 5683

Your .footer div doesn't contain the <p> elements anymore because they are floated. You have to use a .clearfix

here a sample:

.clearfix:after {
     content: " "; /* Older browser do not support empty content */
     visibility: hidden;
     display: block;
     height: 0;
     clear: both;
}

after you add this to your css, your footer should look like this

<div class="footer clearfix" >
     <!-- Your paragraphs -->
</div>

Upvotes: 0

LcSalazar
LcSalazar

Reputation: 16821

The div does have a background, it just won't have a size because all of it's children are floated.

Quoting MDN float docs:

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container

meaning that a floated element don't affect it's parent's width or height anymore.

Upvotes: 0

Jonathan
Jonathan

Reputation: 1564

In the 

div.footer p{
    background-color: #00A2E8;
    overflow: hidden

You are missing a closing }

change it to:

div.footer p{
    background-color: #00A2E8;
    overflow: hidden;
}

You are also missing a closing p tag in your 'float:right' paragraph tag

Upvotes: 0

Related Questions