Question

I have a project title as a header in my webpage. This project title is within a div called “pagetitle”. After the project title, i have two words which one has to be on the left and another on the right. I want a white background everything within the “pagetitle” div leaving alittle space at the bottom after the two words. I have tried “padding-bottom:10px” for the two words. However, the white background does not stretch to cover that 10px included. May I know how should i do it?

Cheers,
ZhengHong

<div class ="pagetitle" style="background-color:black;">
        <center style="padding: 10px 0 0 0">Executive Summary Dashboard<center>
        <br><left style="float:left; padding:0 0 10px 10px;">Subject Selected:</left><right style="float:right;padding:0 10px 10px 0; background-color:green; margin-bottom:10px;">Time frame:</right></br>
        </div>

Answer 1

You need to clear floats.

1. Add this to your css

   .clearfix:before, .clearfix:after { content: “\0020”; display: block; height: 0; overflow: hidden; }
   .clearfix:after { clear: both; }
   .clearfix { zoom: 1; }

2. Add class .clearfix to your top div so you have div class=”pagetitle clearfix”