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>
You need to clear floats.
Add this to your css
.clearfix:before, .clearfix:after { content: “\0020”; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
Add class .clearfix to your top div so you have div class=”pagetitle clearfix”