Some sites have a top header spanning both columns. They may either place the site's logo or name here, or, perhaps even banner advertisements or both. In the same way, some sites also include a footer that span both columns. Among other things, the footer may be used for things like copyright notices.
To use a header and footer using this 2-column layout, modify your HTML code as follows.
<div id="layout">
<div id="header">Top Header</div>
<div id="navbar">Navigation</div>
<div id="content">Content here</div>
<div id="footer">Bottom Footer</div>
</div>
Add the following CSS code to [URL REMOVED] Website Development[/url] existing style sheet. Simply place it after the styles you created above.
#footer {
clear: all ;
}
If you want the text in your header to be centred, add the following. Otherwise, there's no need to define a header style.
#header {
text-align: center ;
}
The same text-align property can be added to the footer to centre the text there as well, if you wish.
To use a header and footer using this 2-column layout, modify your HTML code as follows.
<div id="layout">
<div id="header">Top Header</div>
<div id="navbar">Navigation</div>
<div id="content">Content here</div>
<div id="footer">Bottom Footer</div>
</div>
Add the following CSS code to [URL REMOVED] Website Development[/url] existing style sheet. Simply place it after the styles you created above.
#footer {
clear: all ;
}
If you want the text in your header to be centred, add the following. Otherwise, there's no need to define a header style.
#header {
text-align: center ;
}
The same text-align property can be added to the footer to centre the text there as well, if you wish.
Last edited by a moderator: