Question

In some websites for example this one, the blue box which shows various options and links such as search, chat, Questions, Tags etc. has its border stretched and fitted to the browser window.

I tried to do so in a web page which i created using div tag but i was unable to make the box stretch and fit to the browser window. Can it be done using div tag? or is there any other way for e.g. CSS?

I do not want to use jQuery or AJAX.

Answer 1

Yes DIV’s are prefect for making navigation menus that fill to the edge.

The most likely problem that you are encountering is the fact that you are making a DIV within another DIV that has rules.

For example

CSS

.container {width:768px;}
.menu {width:1000px;}

HTML

<div class="container">
    <div class="menu">
    The Menu Would Go here
    </div>
</div>

Now as you can see in the above example you have a menu within the container – now because the width of the container is 768px the menu can’t not be 1000px since 768px is the max size set by the first container.

Now there are several ways around this and by using position:absolute;

So assuming that you want your menu 100% wide to reach the edges and you want the menu at the top it would look like this in the CSS.

Lets put this to practice and see what happens so you know what to do from here on wards 😛

CSS

.container {min-height:500px;background:#000;width:300px;margin:120px auto;}
.menu {
  position:absolute; /* Tells Menu to ignore the size and position of container */
  background:#CCC;
  width:100%; /* This tells the the Div to be 100% in Width */
  top:0; /* This sets the menu to the top increase number for distance */
  left:0; /* This sets where it should start from left to right */
  height:100px; /* This sets the height of the menu */
  }

Here is a demo of it in example I just made: http://jsfiddle.net/9j2pa/ play around with it and get used to whats going on.

Additionally you could always move the MENU out of the container, for example:

<div class="menu">
The menu is not contained within the container and width:100% will work.
</div>
<div class="container">
The rest of the site is contained within here
</div>