1

hi im trying to make a web page. Following css im using for the style part, when i give wrapper a background color its working but when i go and style child elements the ground color of wrapper is not working, what could be the reason? please help me!

body{margin:0px}

.wrapper{width:960px; margin:0 auto; background-color:#ccc;}

 .wrapper > .header{width:960px;}

.wrapper > .header > .logo{width:209px; height:50px; float:left;}

.wrapper > .header > .links{float:right;}
  • Do you already have other content on your site than the header? Otherwise the wrapper is just the size of the header and therefore hidden behind it – Toon Casteele Feb 27 '13 at 08:55

2 Answers2

2

the reason is that your "wrapper" has no height, because of the float inside. To fix this you can do 2 things:

  1. Clear you float (recommended)
  2. add overflow: hidden to the wrapper

1) clearing float

.floatstop:after {content: ".";display :block;height :0;clear :both;visibility :hidden;}
*:first-child+html .floatstop {min-height: 1px;} /* ie7 fix */
* html .floatstop { height: 1%;} /* ie6 fix */

<div class="wrapper floatstop"> .elements.. </div>

2) overflow trick

.wrapper {
  width:960px;
  margin:0 auto;
  background-color:#ccc;
  overflow: hidden;
}
Mark
  • 6,762
  • 1
  • 33
  • 50
1

You will need to float your wrapper in order to give it the height of the elements contained within it, this will then show the background colour. At the moment when you inspect the .wrapper in Chrome what dimensions does it give, if it is 0x0 then the above fix will work.

Sean H
  • 141
  • 5