Arrangement of Header, Section, and Footer with CSS

I'm trying to structure my HTML code in a specific way using CSS. Here's my basic HTML code:

<header></header>
<main>
<nav></nav>
<section></section>
</main>
<footer></footer>

I want the header to be at the top, the footer at the bottom, and the nav and section to be positioned between them. The nav should be on the left and the section on the right, similar to the layout of a website like .

If the main content is smaller than the screen size, I also need the footer to be fixed at the bottom of the screen.

Here is a snippet of the CSS I have so far:

    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;
    }

Can anyone provide assistance with achieving this layout?

htmlcssheaderheightfooter

Answer №1

If you're looking to create a basic page layout, there are various ways to achieve that. You can refer to this helpful guide for general information on how to go about it.

One method outlined in the guide involves using the CSS float property. This should provide you with a good starting point for your design 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 &copy; W3Schools.com</footer>

</div>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Enhancing react-input-range with unique Custom Arrow heads

I'm currently working with react-input-range to create a price range slider. While I've managed to customize the CSS of the range slider, I now need to figure out how to add arrow heads inside the circles as shown below: https://i.sstatic.net/pm ...

javascriptcssreactjsless

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

cssregextextmatetextmatebundles

What causes the disappearance of CSS styles when attempting to modify the className in react js?

I am currently working on a basic react application, and I am trying to dynamically change the name of a div element using the following code snippet - <div className={'changeTab ' + (page.login ? 'leftSide' : 'rightSide')} ...

javascripthtmlcssreactjs

Providing a user with a special discount tailored to their email address?

<script type="text/javascript"> function updatePrice() { var price = document.getElementById("product").value; var size_price = document.getElementById("size").value; var a=parseInt(price);//parsed type price var b=parseInt(size_price);//pa ...

javascripthtml

Avoid having a pre tag enclosed long line exceed its container's width

Within the <pre> </pre> tags, I have a lengthy single line of text that needs formatting. Is there a method to automatically wrap the text or must I manually insert <br> tags within the text? ...

htmlcss

Tips for importing font files from the node_module directory (specifically otf files)

We cannot seem to retrieve the fonts file from the node module and are encountering this error message. Can't find 'assets/fonts/roman.woff2' in 'C:\Projects\GIT2\newbusinessapp\projects\newbusinessapp\src ...

javascriptcssnode.jsangularsass

Guide on creating a live connection between a slider and a canvas

Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...

javascripthtmlhtml5-canvas

Change the button text without the need for a click, automatically switch

How can I make a button switch between 'click here' and 'download' every 2 seconds without requiring user interaction? The code I've tried so far is below, but it's not working as expected: <div class="assetClass customBut ...

jqueryhtml

Navigating to a precise element within a page in Angular with flawless redirection

I recently encountered an issue where I had to add a span element with a specific ID in my HTML code to ensure that clicking on the Reply button would navigate to it. However, this modification was only necessary for the last element on the page. While the ...

htmlangularurl-routing

Looking to integrate the date, month, and year selection tags into the inline format

The Edit User Profile page includes a Birthday field, which is currently displayed vertically. I am looking to change the layout so that the Birthday field appears horizontally. Here is the code I am using: Within visitors/edit.html.erb, <%= simple_f ...

javascripthtmlcssruby-on-rails-4datepicker

Utilizing JSON data to generate an HTML webpage showcasing a collection of community districts through the power of JavaScript

As a beginner in javascript, I am working with a JSON file that contains an array of objects. Each object includes two properties: a borough and mappings. Mappings have two sub-properties called macro and neighborhoods. The macro represents a larger neighb ...

javascripthtmljson

Error encountered when attempting to utilize a variable within an EJS template document

I seem to be encountering some difficulties while attempting to get an EJS template file to recognize a variable that holds the rows from an SQLite3 table query in a related .js file. Whenever I try to access that route by launching the server, I receive a ...

htmlnode.jsexpressejs

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

One of the challenges I'm facing is having a mat-card within a component template: <mat-card *ngFor="let p of products" (click)="viewProduct(p)"> <mat-card-actions> <button mat-stroked-button (click)="addProductToCart(p)"&g ...

htmlangulartypescriptangular-material

Trouble encountered when attempting to download PDF using jQuery

I have encountered an issue while trying to download a PDF using Ajax response HTML. Here is the code I am using: var newPDFAction = function () { $.ajax({ type: "post", url: '{{ route("admin.getCustomerSalesRepTota ...

htmljquerypdf

Prevent the line from crossing over the circle in CSS

How can I prevent the line from intersecting the circle? I want the line to be outside the circle. The background (in this case, of the li tag) will be transparent. #project-wrapper { width: 100%; /* Adjusting the position of the element on the pa ...

htmlcss

Is it possible to utilize the <hgroup> element with various <h> heading levels?

<hgroup> <h4>Role</h4> <h3>Graphic Designer</h3> <h5>Company: Godigital</h5> </hgroup> Should I keep this structure, or should I use the <h3><h4><h5> order instead? ...

html

Unexpected behavior observed with Mui theme breakpoints

I have defined breakpoints for my MUI React-based app like so export const lighttheme = createTheme({ palette: palette, typography: typography, breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, ...

cssreactjsmaterial-uibreakpoints

Ways to position Drop-down menu flush against the left edge of the webpage?

I am facing a challenge in customizing my CSS3 Mega drop-down menu. I want the mega menu to start from the left side of the main page, beginning from the home button area and extending all the way to the end. Currently, it is appearing where the parent men ...

htmlcss

Differences between using tables and divs for form layouts

After searching online for examples of form implementations using DIVs, I noticed that most were simple one-column forms. However, my forms are more complex, like the one shown in this image: Although I can easily create these forms using tables, I encoun ...

htmlcssformstablelayout

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11