#pager { width: 1100px; height: 500px; background: #000; margin: 0 auto; } #header { height: 93px; width: 100%; background: #fdd; } 
 <div id="pager"> <div id="header"> </div> </div>

How do I rotate the pink part of the entire width of the page?

  • If you do not resort to any perversions, then nothing. - mJeevas

3 answers 3

 #pager { width: 1100px; height: 500px; background: #000; margin: 0 auto; } #header { height: 93px; width: 100%; background: #fdd; } body { margin: 0; } 
 <div id="header"></div> <div id="pager"></div> 

     *{ padding: 0; margin: 0; } body { background: #000; } header { min-height: 93px; width: 100%; background: #fdd; } .container { max-width: 1100px; margin: 0 auto; } 
     <header> <div class="container"> </div> </header>

      Make the cap positioning absolute and set the initial zero position to the left:

       position: absolute; left: 0; 

       #pager { width: 300px; height: 200px; background: #000; margin: 0 auto; } #header { height: 93px; width: 100%; background: #fdd; position: absolute; left: 0; } 
       <div id="pager"> <div id="header"> </div> </div>

      • Yeah, and the text pager fun "leaves" for the title, hiding out of sight. - ߊߚߤߘ
      • @Arhad Have you read the text of the question? - edem
      • Как мне развернуть розовую часть на всю ширину страницы? - where is the overlap of the underlying content? - ߊߚߤߘ
      • @Arhad I answered the main question of the author? - edem