Absolute Positions & Flexibility: A Guide

I'm currently in the process of developing an asp.net core MVC web application with bootstrap. My goal is to create a sidebar and main content area within the layout. I've written the code below in a partial view, which is then included in _Layout.cshtml. Everything seems to be working fine, however, I want the main content (currently just placeholder text) to appear next to the sidebar instead of being pushed down below it.

https://i.sstatic.net/fs7Aa.png

Here is the desired layout:

https://i.sstatic.net/d3Ynx.png

Essentially, I want the sidebar on the left and the main content on the right, but as you can see in the image, the main content is currently displayed below the sidebar.

The HTML for the Sidebar:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9d90908b8c8b8b8d9e8fbfcbd1c9d1cf">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column text-white bg-dark" style="width: 280px; height: 100vh;">
  <a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
    <img class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" alt="Logo" style="height: 60px; width: 150px;" />
  </a>
  <div class="d-flex align-items-center text-light text-decoration-none">

  </div>
</div>

<div class="container d-flex flex-column">
  <main role="main" class="pb-3">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum.
      Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada
      fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.</p>
  </main>
</div>

Any suggestions on how I can position the main placeholder content alongside the sidebar instead of below it?

htmlcssbootstrap-4flexbox

Answer №1

If you want to tackle your problem effectively, consider using flexbox in the right way. Here is a snippet of code that can help you achieve that:

HTML:

<div class="wrapper d-flex justify-content-between">
   <div class="item d-flex flex-column text-white bg-dark">
      <a class="d-flex align-items-center justify-content-center text-white text-decoration-none" href="/">
         <img alt="Logo" class="img-fluid m-auto pt-sm-2" src="~/assets/img/Config.png" style="height: 60px; width: 150px;"/>
      </a>
      <hr>
      <ul class="nav nav-pills flex-column mb-auto">
      </ul>
      <hr>
      <div class="d-flex align-items-center text-light text-decoration-none justify-content-center">
         <ul class="nav-item d-flex">
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="fas fa-paint-roller">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="#">
                  <i class="far fa-question-circle">
                  </i>
               </a>
            </li>
            <li class="navbar-footer-list px-2">
               <a class="btn navbar-btn-circle text-muted" href="">
                  <i class="fab fa-github">
                  </i>
               </a>
            </li>
         </ul>
      </div>
   </div>
   <div class="item d-flex flex-column">
      <main class="p-5" role="main">
        <h2>Home</h2>
         <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lacus viverra vitae congue eu consequat ac felis donec. Eros in cursus turpis massa tincidunt. Mattis enim ut tellus elementum. Facilisi cras fermentum odio eu feugiat. Neque volutpat ac tincidunt vitae semper. Nulla pharetra diam sit amet nisl suscipit adipiscing. Lobortis feugiat vivamus at augue eget. At augue eget arcu dictum varius duis at consectetur. Et netus et malesuada fames ac. Morbi tristique senectus et netus et. Et pharetra pharetra massa massa ultricies mi quis hendrerit dolor.
         </p>
      </main>
   </div>
</div>

CSS:

<style type="text/css">
    body, html {
        height: 100%;
    }
    .wrapper {
        width: 100%;
        height: 100%;
    }
    .wrapper .item:nth-child(1) {
        flex: 0.25;
    }
    .wrapper .item:nth-child(2) {
        flex: 0.7;
    }
</style>

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

Utilizing JavaScript Modules to Improve Decoupling of DOM Elements

Currently, I am tackling portions of a complex JavaScript application that heavily involves DOM elements. My goal is to begin modularizing the code and decoupling it. While I have come across some helpful examples, one particular issue perplexes me: should ...

javascripthtmldom

Surprising results when a class is applied using jQuery

Exploring the differences between two fiddles (make sure to run the code on the jsfiddle pages to see the differences clearly). First Fiddle Simple demonstration: $("body").addClass("noScroll"); alert($("body").hasClass("noScroll")); $("body").removeCla ...

javascriptjqueryhtmlcss

The keyframe spinner fails to function properly on Firefox and results in blurry text

I am facing an issue with a keyframe spinner that rotates an image on the y-axis. It works perfectly in Chrome but fails to function in Firefox. I have tried changing the HTML tags to div or span class/id, but nothing seems to work. Interestingly, other ke ...

htmlcss

Troubleshooting problems with printing HTML divs and page breaks caused by using float and position styles

Look at this class: .divDutySlip { width: 90mm; min-height: 120mm; padding: 2mm; /*float:left; position: relative; */ margin: 2mm; border: 1px solid #000000; page-break-inside: avoid; } I've modified two styles. Dis ...

htmlcsspage-break-inside

Creating a div with a fixed size in Tailwind CSS: A beginner's guide

I received some initial code from a tutorial and I've been having trouble setting the correct size. Despite searching through documentation for solutions, it seems like there's a fundamental aspect that I'm overlooking. The main issue is tha ...

htmlreactjstailwind-css

What could be causing the header of the datatable to be out of alignment with the rest of

I'm facing an issue with my datatable where the header is misaligned with the content. Can someone please assist me in adjusting the header and content so that they are parallel? It doesn't look right at the moment. <div style="margin-top:1 ...

javascriptjqueryhtmlcss

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

javascripthtmlcssbutton

Utilize jQuery to generate a dynamic table within a Razor view

I am trying to implement a table in a razor view. <div class="row" style="margin-left:80%"> @if (ViewBag.IsGlobal == 1) { <script> $(document).ready(function () { $("#btnViewLocal").prop("disabled",t ...

jqueryhtmljsonasp.net-mvcrazor

Problems Arising from the Content Menu and Tab Opening Features of a Chrome Extension

I am encountering an issue with the code below not displaying the context menu when text is selected on the webpage. Currently, when I select text, the context menu fails to appear. Code function getword(info,tab) { if (info.menuItemId == "google") ...

javascripthtmljsongoogle-chrome-extensioncontextmenu

Adjust the size of a ul element to fit within a div

I am struggling with getting a ul element with 2 li items inside to perfectly fit a parent div. I want the li items to take up 100% of the height of the div and 50% of the width each. <div id='menu-wrapper'> <ul id='menu-list&a ...

htmlcsshtml-lists

Adjustable Column Spacing in Bootstrap

My layout consists of a row with three columns that adjust sizes based on the screen size. However, I encounter an issue when shrinking the screen, as I only want the margin to change for specific boxes. The following illustrates the appearance with no mar ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Interactive form design using Bootstrap - combining labels, input fields, and buttons in a streamlined inline

Looking for a clean HTML markup without the need for custom CSS like Bootstrap, my goal is to achieve a design similar to the demo I created on bootply - http://www.bootply.com/1Uy4UROiEz The only issue with the above demo is that I want the go button to ...

htmlcsstwitter-bootstrap

"Encountering a Challenge with Setting Up Forms on

I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here: I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn&ap ...

htmlcssforms

Adjustable ember count within Intercom HTML using Selenium and Python

My goal is to automate tasks at my workplace, but I am facing some challenges. Due to the lack of admin access on my work Intercom App, I have resorted to using Selenium. I need to input "Hey" into the chat box on Intercom and send the message successfull ...

pythonhtmlseleniumember.jsintercom

Strategies for resolving field errors in Django models file

While working on an ecommerce website, everything was running smoothly until a new app with a different customer model was added. Though it utilized the user model, the app was eventually deleted since it wasn't necessary. However, after deletion, the ...

pythonhtmlcssdjangopostgresql

Having trouble loading image on web application

Currently, I am facing an issue while attempting to add a background image to an element within my Angular web application. Strangely enough, the relative path leading to the image seems to be causing my entire app to break. https://i.stack.imgur.com/b9qJ ...

htmlcssangularweb-applicationsrelative-path

How to center a Bootstrap 4 navbar with brand and links in the middle

I'm facing some difficulty in centering the navigation bar of my website, including the brand and the links. Since I am more focused on backend development, I'm struggling with the frontend aspect of this. Code <script src="https://ajax.go ...

htmlcssbootstrap-4

How can I override the maximum body width to enable specific div elements to extend beyond that limit?

While I've come across similar questions to mine, none of them seem to solve my specific issue. Essentially, I've set the body width to 960px, which is a common standard practice. However, there are certain elements such as header, footer, and so ...

htmlcss

Unable to focus on input within a hidden div due to technical limitations

Can the focus() function be used on an input field that is located inside a hidden div with the following CSS properties: opacity: 0; visibility: hidden; When a button is clicked, the hidden div becomes visible by adding a new class to the body: Check ...

javascriptjqueryhtmlcss

Using PHP to generate a table populated with generic elements from an array

How can I create a dynamic table in PHP that can handle any generic array with different keys and values, including nested arrays? I want to use the same table structure for various arrays regardless of their content. Any advice on achieving this flexibili ...

phphtmlarrayshtml-table