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

The hamburger menu icon is not visible

I recently built a website and aimed to ensure it had a responsive design. Following a tutorial on YouTube, I implemented everything exactly as shown in the video. However, I encountered an issue with the hamburger icon not appearing. Can anyone shed som ...

htmlcssresponsive-designhamburger-menu

There seems to be a disconnect between the CSS and HTML files

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JavaScript Basics</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="c ...

htmlcss

Unable to define a range for the hr element using the nth-of-type selector

Why isn't the hr element from the 1st to the 3rd hour red as specified in the CSS code below? hr:nth-of-type(n+1):nth-of-type(-n+3){ background:red; } <!DOCTYPE html> <html> <head> </head> <body> <hr /> <p>T ...

htmlcss

Scroll positioning determines the height of an entity

Here's a code snippet I'm working with: HTML: <div id="wrap"> <div id="column"></div> </div> CSS: #wrap { display: block; height: 2000px; width: 400px } #column { display: block; height: 20px; ...

javascriptjqueryhtmlcss

Ensuring Input Integrity: Utilizing HTML and Javascript to Block Unfilled Form Submissions

Currently, I am working on developing a registration page using HTML and JavaScript. Although I have added the 'required' tag in HTML to prevent users from submitting empty input fields, I noticed that users can bypass this restriction by simply ...

javascripthtml

Create beautiful HTML forms with Laravel Collective Forms in Laravel 5.7

I am currently using the Laravel Collective form code shown below: {!! Form::open(['action' => ['CategoryController@sub8', $item1->id], 'method' => 'post']) !!} {{Form::label('postaladdress', &apos ...

phphtmllaravelforms

Limit Use of Special Characters in HTML and AngularJS

` ~ ! @ # $ % ^ & * ( ) _ + = { } | [ ] \ : ' ; " < > ? , . / I need to limit the use of special characters and numbers in the input field. To achieve this, I have employed the following pattern: ng-pattern="/^[a-zA-Z ]*$/" This patt ...

htmlangularjs

The .on() function in Jquery seems to be malfunctioning when it comes to handling dynamically

Despite my efforts to find a solution after exploring other questions and attempting various possible fixes, I am still unable to correctly bind the click event. Any assistance would be greatly appreciated. My current project involves a webpage that intera ...

jquerycssajaxdom

Guide to extracting and utilizing a JSON object received from the parent page

Hello, I've been searching online for quite some time and can't seem to find a solution to my question. If anyone could help, I would greatly appreciate it. Below is the code I am working with: <ion-content> ...

htmljsonangularjs

Zooming in on the background with an animated effect

I'm experimenting with a zoom in animation on a background image for a brief moment. It seems to work initially but then resets itself. To see an example, I've created a jsfiddle link: https://jsfiddle.net/onlinesolution/tk6rcLdx/ Any idea what ...

csscss-transitionscss-animations

Utilizing Material UI with Appbar logo aligned to the left and Tabs featured at the center

I am currently working on creating a react material ui AppBar. The design includes a logo and tabs, with the tabs supposed to be centered in the AppBar and the logo positioned on the left side. However, I have been facing difficulty in making the logo al ...

cssreactjsmaterial-uicss-grid

Ways to stop a hyperlink from executing on confirmation cancel using jquery

I'm having trouble with a link that should not perform any action when the cancel button is clicked. I've attempted to use false in the click event and also tried using e.preventDefault, but I'm unsure if I am implementing it correctly. Can ...

jqueryhtml

Access dynamic content from Tinymce 4.x without any manual effort

Is there a way to extract the HTML content from a tinyMCE editor and display it on a page without using the tinyMCE editor itself? I know about the getcontent() function in tinyMCE, but is there another function, parameter, or plugin that can be used to ...

cssclasstinymceextract

Selenium and PhantomJS are having trouble interpreting JavaScript code

Currently experimenting with Selenium and PhantomJS for Java search tasks, I'm facing an issue where PhantomJS fails to activate javascript. My goal is to access a webpage that utilizes javascript. Previously, this method worked well for me, but now I ...

javascriptjavahtmlseleniumphantomjs

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

The addClass and removeClass functions seem to be malfunctioning

Hey everyone, this is my first time reaching out for help here. I looked through previous questions but couldn't find anything similar to my issue. I'm currently working on a corporate website using bootstrap3 in Brackets. I've been testing ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is requesting transclusion in an Angular directive necessary?

An issue has cropped up below and I'm struggling to figure out the reason behind it. Any suggestions? html, <button ng-click="loadForm()">Load Directive Form</button> <div data-my-form></div> angular, app.directive(&apos ...

javascriptphphtmlangularjsangular-directive

Issue with Material-UI's DataGrid scrollbar not displaying on the screen

I have a DataGrid set up with at least 20 rows. My goal is to limit its height and allow users to navigate through the remaining rows using the scroll bar within the component. However, I'm facing an issue as the scrollbar for the DataGrid itself is n ...

cssreactjsmaterial-ui

What are the steps for populating a table cell with data using AJAX, MySQL, and PHP in the given situation?

The challenge is to create an HTML table with two columns where the first column gets its data from PHP and MySQL. The goal is to turn the values in the first column into clickable links that, when clicked, trigger an AJAX call to fetch information from th ...

phphtmlmysqlajaxhref

"Is it possible to apply CSS to all HTML elements except for a

I am looking to apply the specified styles to all elements except for a particular class and its descendants. html * { box-shadow: none !important; border: none !important; color: white; } I attempted the following but it did not work as intended: ht ...

htmlcss