Css for header,section and footer arrangement
Question
I have basic html code :
<header></header>
<main>
<nav></nav>
<section></section>
</main>
<footer></footer>
and I need css to have the header at the top, the footer at the bottom, the nav and the section between the header and footer, with the nav on the left and the section on the right.
As an example : https://fr.wikipedia.org/
But in the case where the main content is smaller than the screen size, I need to have the footer fixed on the bottom of the screen.
My CSS is something like that :
header, nav, section, footer {
padding: 1px 0;
}
header {
background-color: lightcoral;
text-align: center;
background: #FF9900 url("/Content/Images/Etoile.png") 5px center no-repeat;
background-size: 100px;
}
main {
margin: auto;
}
nav {
float: left;
width: 15%;
background-color: lightsalmon;
}
section {
float : right;
width : 85%;
background-color: lightblue;
}
footer {
background-color: lightgreen;
text-align: center;
clear: both;
}
Could you help me please ?
1 answers
solution1
0 2017-06-06 15:13:50
What you're trying to do is create a simple page layout. You can check out this resource for general information about how to do this, since there are multiple ways.
An example taken from the above resource is using the CSS float property. It should give you enough to start with for your solution.
<!DOCTYPE html> <html> <head> <style> div.container { width: 100%; border: 1px solid gray; } header, footer { padding: 1em; color: white; background-color: black; clear: left; text-align: center; } nav { float: left; max-width: 160px; margin: 0; padding: 1em; } nav ul { list-style-type: none; padding: 0; } nav ul a { text-decoration: none; } article { margin-left: 170px; border-left: 1px solid gray; padding: 1em; overflow: hidden; } </style> </head> <body> <div class="container"> <header> <h1>City Gallery</h1> </header> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav> <article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> <footer>Copyright © W3Schools.com</footer> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.