A Few Adjustments


Many websites have what is known as a Footer at the bottom of the page. Within the CSS code below a #footer section has been added.


In the next example, you would have noticed that the text in the navigation column and the main area were squashed to the edges of the boxes. To get around this, padding can be added to those boxes. See this Example. The text is not squashed against the box edges anymore BUT look what has happened to the width of the #mainarea.


Remember the pesky padding issue? It has happened again! This time, by adding 5 pixels of padding to both #navigation and #mainarea boxes added a total of 20 pixels to the web page width. Therefore, we need to take off 20 pixels from the #mainarea ... 648 - 20 = 628.


These changes and the insertion of a footer are highlighted in red below. Copy and paste the red text below to your relevant documents, click Save, then refresh your browser again to see the changes.




#navigation{

float: left;

background-color:#f9bf9e;

width: 200px;

padding: 0px 5px;

}

#mainarea{

float: left;

background-color:#f7e8aa;

width: 628px;

padding: 0px 5px;

}

#footer{

background-color: #f7dbaa;

width:848px;

}





<div id="navigation">

<p> This is a great place to put your navigation links</p>

</div>

<div id="mainarea">

<p>I am going to build my first website using CSS and HTML. This is the main area of the website where all or most of my content would go. This could include text and images.</p>

</div>

<div id="footer">

<p>This is the footer area for further information, as required.</p>

</div>

</body>

</html>



What has changed? Have a look at the Example.


The right side of the #mainarea is back in alignment with the #header. Hooray! Also a footer has been added, which is a popular method of adding additional information or handy links on a website. However all it not what it seems ....


Narrow the width of the browser window and you will see that when squashed, the #mainarea box moves below the navigation box. Clearly this is very annoying and we need to sort it out.


Box within a Box


In order to solve the floating problem, the #navigation and #mainarea boxes can be placed within another box. Effectively, this new box 'wraps' the 2 together. Add the red CSS and HTML below to your documents, taking care to put the HTML in the correct place. Again, Save your work and refresh your browser.




#footer{

background-color: #f7dbaa;

width:848px;

}

#wrapper{

width:880px;

}





<div id="wrapper">

<div id="navigation">

<p> This is a great place to put your navigation links</p>

</div>

<div id="mainarea">

<p>I am going to build my first website using CSS and HTML. This is the main area of the website where all or most of my content would go. This could include text and images.</p>

</div>

</div>

<div id="footer">

<p>This is the footer area for further information, as required.</p>

</div>



What has changed? Have a look at the Example.


An outer box called #wrapper now contains the #navigation and #mainarea boxes. Reduce the width of your browser to see what happens. The main area box will maintain its position relative to the navigation box.