Clever Geek Handbook

How do I fill the header with the background color without specifying the pixel height?

I was playing with responsive design and wanted to know how to fill the title with the background color without defining the pixel height, which I used to do but is not responsive.

My demo is here and you can see that I was trying to fill the title with yellow

+3


source to share


5 answers


1) header{overflow: hidden;}


2)



header:after{
    content:'';
    display:block;
    clear:both;
    }
+1


source


This will do the trick, but you can add an addition as well:



header {
  background-color: #FABA1A;
  overflow: hidden;
}
0


source


You are using floats for children elements, so you need to clear them using clearfix methods you can google for.

You can use overflow:hidden;

for a quick and pleasant solution

header {
    background-color: #faba1a;
    overflow: hidden;
}
0


source


Instead of setting the pixel height, set the percentage (of course, you will need to set the same div to absolute positioning).

div {
 height: 10%;
 position: absolute;
}
0


source


add rule

header {float: left;}

The problem is your div content is all floating, so it collapses to 0 height. You can simply fix this by placing a container. Depends on what else you want to add.

0


source






More articles:


All Articles