What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up overlapping. Why does this keep happening?

body {
  background: gray;
}

section {
  background: red;
  display: block;
  width: 70%;
  position: absolute;
  top: 0;
  right: 0;
}

footer {
  background: green;
  display: block;
  width: 70%;
  padding: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
}

nav {
  display: block;
  width: 30%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: blue;
  color: #fff;
  padding: 10px;
}
<body>
  <nav class="sidebar">
  <!-- Insert sidebar content here -->
  Content example
  </nav>
  
  <section>
  <!-- Insert section content here -->
  Content example
  </section>
</body>

<footer>
  Content example
</footer>

htmlcss

Answer №1

Instead of using position: absolute, try implementing display: grid for a more flexible layout.

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: gray;
  margin: 0;
  height: 100vh;
}

main {
  height: 100%;
  display: grid;
  place-content: space-between;
  grid-template-columns: 30% 70%;
  grid-template-areas: "nav section" "nav footer";
}

section {
  background: red;
  grid-area: section;
  height: 50px;
}

footer {
  background: green;
  padding: 20px;
  grid-area: footer;
  height: 50px;
}

nav {
  grid-area: nav;
  height: 100%;
  background: blue;
  color: #fff;
  padding: 10px;
}
<main>
  <nav class="sidebar">
    <!-- Put Here content of sidebar -->
    Content example
  </nav>

  <section>
    <!-- Put Here content of section -->
    Content example
  </section>

  <footer>
    Content example
  </footer>
</main>

Answer №2

body {
  background: gray;
}

section {
  background: red;
  display: inline-block;
  width: 100%;
  vertical-align: top;
  height: 4vh;
}

footer {
  background: green;
  display: inline-block;
  width: 100%;
  height: 4vh;
}

nav {
  display: inline-block;
  width: 30%;
  height: 20vh;
  background: blue;
  color: #fff;
}

spacer {
  width: 100%;
  height: 12vh;
  display: inline-block;
}

html,
body,
nav,
section,
footer {
  margin: 0;
  padding: 0;
}

div {
  display: inline-block;
  width: 70%;
  vertical-align: top;
}
<nav class="sidebar">
  <!-- Add your sidebar content here -->
  nav
</nav><!--
--><div>
  <section>
    <!-- Add your section content here -->
    section
  </section>
  <spacer>&nbsp;</spacer>
  <footer>
    footer
  </footer>
</div>

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

Challenges faced when utilizing AJAX within a PHP loop

I am currently using a PHP WHILE loop to showcase multiple products, each with its own unique id#. These products can be rated using a PHP AJAX JQUERY-based system. However, after a user rates a product and the AJAX response returns the value, it is curren ...

phpjqueryhtmlajaxwhile-loop

Transferring an image between two <td> cells within the same table

For a project, I'm working on creating a Checkers game. I have the checker board and pieces ready, but I'm struggling with the movement logic. My goal is to enable the image to move or transfer from one td element to another when clicked. A frie ...

javascriptphpjqueryhtmlcss

Navigate to a different web page within the body tag without changing the current URL by utilizing a hash symbol

I am working with two HTML files, index.html and about.html. My goal is to display the content of about.html within my index.html without navigating away from it. After observing many websites, I noticed that they often use #about in their URLs to dynamic ...

javascriptphphtmlcss

The validation requirement in Angular prevents the form from being considered valid until the input has been modified

I have included the HTML5 required property in the below HTML code: <div class="col-sm-3"> <label>{{question.placeholder}}<span *ngIf="question.required">*</span></label> </div> <d ...

htmlangularangular-forms

What causes custom CSS properties to be overridden by Material UI CSS class properties?

I encountered an issue while attempting to utilize an npm package containing a Typography element from Material UI. The code is authored by me. Upon integrating it into a project, I noticed that the typography's CSS class properties were overpowering ...

htmlcssreactjsmaterial-ui

Aligning the tooltip element vertically

I've created a unique flexbox calendar layout with CSS tooltips that appear on hover. One challenge I'm facing is vertically aligning these tooltips with the corresponding calendar dates effectively. Although I prefer to achieve this alignment u ...

javascriptjquerycssflexbox

MailJet experienced a template language issue while trying to send a message with Template [ID]

While running a test on a MailJet email template that includes a basic custom HTML code block, an error occurs in the received test email. (The live preview in the browser functions correctly) From [email protected]: An issue with the template lang ...

htmljsonfor-loopobjectmailjet

Adding a background with padding to a bootstrap grid row - here's how!

Bootstrap is a new concept to me, but I am starting to appreciate the grid system it offers. I have successfully created a test layout using Bootstrap, however, the one thing I am struggling with is adding a background around certain rows. Can anyone gui ...

csstwitter-bootstrapbackgroundgrid

Centralize Arabic symbol characters

Is it possible to center the symbols that by default go above characters such as مُحَمَّد? .wrapper { text-align: center; vertical-align: center; } span { font-size: 4rem; display: inline-block; padding: 2rem; margin: 0.2rem; ba ...

csstwitter-bootstrapbootstrap-5

Is there a way to retrieve the row and parent width from a Bootstrap and Aurelia application?

Is there a way to determine the exact width of a bootstrap grid row or grid container in pixels using Aurelia? I attempted to find this information on the bootstrap website, but I am still unsure as there are multiple width dimensions such as col-xs, colm ...

javascriptcssbootstrap-4aurelia

Struggling with properly navigating a JSON file in my JavaScript code... specifically trying to access and retrieve the "responseObject.weather[i].weatherresponseObject.weather[i].description" data

Struggling with extracting data from a PHP file in JSON format to display on an HTML file using JavaScript. I seem to be encountering issues with accessing responseObject.weather[i].weatherresponseObject.weather[i].description, and I suspect it might be d ...

javascripthtmlajax

Position the input element in the middle of the div

Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be ...

htmlcss

Incorporate Multiple Choice Queries into your PHP Online Form

My PHP web form consists of text fields, dropdowns, and radio buttons. When submitted, the information is sent to me via email. I am trying to implement a multiple choice question with checkboxes. Although I can create the form field, I'm struggling t ...

phphtmlforms

Avoid allowing users to accidentally double click on JavaScript buttons

I am working with two buttons in a Javascript carousel and need to prevent users from double-clicking on the buttons. Below is the code I am using: var onRightArrow = function(e) { if (unitCtr<=unitTotal) { unitCtr++; TweenLite.to(p ...

javascriptcsshtmlcarousel

When I try to scroll on my mobile device, the element is forced to reload

My donate page has a header with a generic placeholder image. On mobile devices like iPhones and Androids, the page initially looks great. However, when I scroll down and then back up, the header disappears for a moment before reappearing as originally ren ...

htmlcss

Tips for modifying the class of a span inline element using a javascript function

Looking for assistance in creating a password text box with an eye icon that toggles visibility. When the user clicks on the eye icon, it should change to a crossed-out eye icon and switch the input type to text. <div class="input-group show-hide-passw ...

javascriptcssbootstrap-4

Adjustable Text Size with HTML5 and CSS3

Looking to enhance the accessibility of a website by implementing text size adjustment buttons ' A A A ' using just HTML5 and CSS3. Avoiding the use of jQuery or Javascript for this task. Inspiration drawn from this link. Appreciate any assistan ...

htmlcss

Displaying an image within a textarea using JS and CSS

Could someone help me create a form with textareas that have small images on them? I want clicking on the image to call a function fx(). Can anyone code this for me using JavaScript/jQuery/CSS? In the image below, clicking on "GO" will call Fx() I attemp ...

javascriptjquerycss

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Capture cached images stored in the browser memory without relying on the source attribute of the <img> tag

Imagine you're managing a website, samplewebsite.com and you find that the images on it have been resized to very low quality. When you click on an image, you are directed to a 'view_image' page, for example samplewebsite.com/view?image=u ...

javascriptjavahtmljsoupbrowser-cache