This post is in response to Nakul’s question on how to extend the header according to the browser’s width.

Here’s the challenge I gave myself: I want to make my Header stretch it’s background IF the browser width is more than the original width of the header (browser width > header’s width which is 950 px) and I want it to stay at 950 px if the browser’s width is less than 950 px.

So here’s how to do it.

1. Look for this code in your header.php file:

<div id=”top”>
<div id=”topi”></div>
<div id=”headr”>
<h1><a href=”<?php echo get_option(’home’); ?>/”>
<?php bloginfo(’name’); ?>
</a></h1>
<div class=”description”>
<?php bloginfo(’description’); ?>
</div>
<div class=”rss2″>
<a href=”<?php bloginfo(’rss2_url’); ?>” rel=”alternate” type=”application/rss+xml”><img src=”<?php bloginfo(’template_directory’); ?>/images/subscribe1.jpg” alt=”Subscribe” style=”border:0″/></a>
</div>
</div>
</div>

2. Add <div id=”pretop”> before the <div id=”top”>:

<div id=”pretop”>

<div id=”top”>
  <div id=”topi”></div>
  <div id=”headr”>
    <h1><a href=”<?php echo get_option(’home’); ?>/”>
      <?php bloginfo(’name’); ?>
      </a></h1>
    <div class=”description”>
      <?php bloginfo(’description’); ?>
    </div>
    <div class=”rss2″>
    <a href=”<?php bloginfo(’rss2_url’); ?>” rel=”alternate” type=”application/rss+xml”><img src=”<?php bloginfo(’template_directory’); ?>/images/subscribe1.jpg” alt=”Subscribe” style=”border:0″/></a>
    </div>
  </div>
</div>

</div>

3. Open style.css and add this css style:

#pretop {
background-color: #161616; }

4. Upload the files to the remote server.

So there. we just added a fluid background on our header. The pretop div that we added doesn’t contain any fix width so the width is browser dependent. Since it contains top div inside it which has a fix width of 950px, it will stop from shrinking once the browser’s width is less than 950 px.

HTH!

sid
how bad do you want change