Arrange flexbox containers side by side in a horizontal row

I am attempting to create two flexbox containers one after the other, utilizing a combination of classes to achieve this layout. While the flexbox is created successfully, I encounter an issue where the lower container goes below the upper one when scrolling. The current output can be viewed here: Current Scenario Output.

My goal is to have these two horizontal bars remain fixed and appear one after the other, regardless of scrolling.

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <link rel="stylesheet" type="text/css" href="{% static 'personal/mystyles.css' %}">
 </head>
<body>

<div class="d-flex flex-column flex-md-row align-items-center pt-1 px-md-4 mb-3 border-bottom shadow-sm sticky-top" style="background-color: #80ccff;">
 <h5 class="my-0 mr-md-auto font-weight-normal">
    <p>Hello, User </p>
 </h5>
 <nav class="my-0 my-md-0 mr-md-3">
    <a class="p-2 text-dark" href=""><b>Home</b></a>
    <a class="p-2 text-dark" href=""><b>Account</b></a>
    <a class="p-2 text-dark" href=""><b>Logout</b></a></p>
 </nav>
 </div>
<!--This div will be used in a different HTML file, and the first div will be included using the 'include' keyword of Django. -->
<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa;"></div>
 </body>
</html>
htmlcssdjangobootstrap-4flexbox

Answer №1

If you want to modify the appearance of your second horizontal bar, you can do so by applying the following CSS styles:

<div class="d-flex flex-column flex-md-row align-items-center pt-5 px-md-4 border-bottom shadow-sm sticky-top" style="background-color: #80ccaa; position: fixed; width: 100%; margin-top: 50px"></div>

Answer №2

To display two divs side by side, enclose them in a parent div and apply the flex property

<body>
 <div class="d-flex">
  <div>...</div> // first div
  <div>...</div> // second div
 <div>
</body>

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

Guide to positioning elements in CSS to maintain a fixed location

While creating a Back To Top button, I set it to a fixed position using the position:fixed; property and also background-attachment:fixed;, but I'm still facing issues with its position changing when new data is inputted. <html> <head> &l ...

htmlcss

Selecting items from a list at random using the power of math.random() and math.floor()

When attempting to randomize the popping of elements in a list stored in the baby variable, only baby[1] is being popped. How can I make it pop random elements? <body> <h1 id="1">bebe</h1> <h1 id="2">t ...

javascripthtml

When the browser's inner width is less than the inner height, use jQuery or JavaScript to show a message on the webpage

I've been having trouble getting this to work and I've attempted various solutions suggested by different sources such as: Display live width and height values on changing window resize php echo statement if screen is a certain size And more, b ...

javascriptphpjqueryhtmlajax

"Is there a way to retrieve JsonResponse from Paginator's page? It seems that the Page object is not able to be serialized into JSON format

(this is my very first question on Stack Overflow) I'm trying to send a JsonResponse from a dictionary named "context" (which appears to be a paginator Page) with the following code: myposts = userposts.all().values() myfollowers = userfollowers.ffol ...

pythonjsondjangojsonresponse

Is there a way to achieve a transparent background while animating the second text?

I am seeking to create a unique typography animation that involves animating the second text, which is colored and consists of multiple text elements to animate. The animation should showcase each text element appearing and disappearing one after the other ...

javascripthtmljquerycss

Is it possible to evaluate the complexity of automating the user interface of a web application?

What are some common indicators of the challenges involved in automating the frontend of a web application? One example could be ensuring that all “critical” elements have stable ID attributes that do not change frequently. Are there any other similar ...

javascripthtmlseleniumprotractorwatir-webdriver

Determine the DOM element that corresponds to a right-click action

I utilized the code snippet below to construct a personalized context menu: <script type="text/javascript"> $(document).ready(function() { var x, y; document.oncontextmenu = function(e) { e.preventDefault(); x = e.clientX; ...

javascriptjqueryhtmlcontextmenu

Django is phasing out support for string view arguments in the url() function, with plans to remove this feature entirely in Django 1.10

As a new user to Python and Django (and Stack Overflow), I encountered an issue while trying to migrate my Django project. The error message reads: RemovedInDjango110Warning: Support for string view arguments to url() is deprecated and will be removed in ...

pythondjangourldeprecated

Is it possible for me to input the language code directly into Django's gettext() function?

One challenge I'm facing is translating strings from the backend to other languages before using them. My plan is to store the user's language preference in the database for easy access. However, I am unsure about how to implement localization wi ...

pythondjangolocalization

The HTML refresh is dynamically controlled by PHP variables

As a newcomer to php/html, I have a question about updating a page's html based on php variables in the forum. Can a page dynamically update its content using php variables? In my scenario, I have: <form action = "" method = "post"> <label&g ...

phphtmlmysql

Issue with Angular: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables such as Arrays

As someone who is new to Angular, I am facing a challenge while working on my portfolio project. The issue arises when trying to receive a list of nested objects structured like this: "$id": "1", "data": { &quo ...

htmlarraysjsonangulartypescript

The Unforeseen Consequences of Bootstrap Navbar CSS

I'm still learning CSS, so bear with me if I don't explain this issue correctly. Whenever I click on a navigation menu tab in Chrome or Safari, a mysterious blue rectangle appears. It doesn't show up in FireFox though. I'm not sure what ...

cssbootstrap-4

Variety of techniques for sampling in Weka

I am facing the challenge of dealing with an unbalanced dataset. In order to address this issue, I have been experimenting with various resampling methods. Currently, I am familiar with three main techniques for handling sampling: 1. Random sampling 2. Cro ...

machine-learningbootstrap-4datasetwekaresampling

The value of Angular Input remains unchanged within a FormArray

I am experiencing an issue with the Sequence No in my PreprocessingForm's FormArray. When I add a new row, the Sequence No does not change as expected. <tr class="mat-row" *ngFor="let dynamic of PreprocessingForm.controls.arithmeticI ...

htmlangulartypescriptformarray

Launching a HTML hyperlink inside a div with the power of jQuery

I am currently exploring the functionality of dragging and dropping an HTML link into a div element. My objective is to have the link open within that specific div element. The layout consists of two divisions named "left-panel" and "canvas". The concept ...

jqueryhtmlajaxjquery-ui

Tips for designing seamless pagination on a mobile-friendly website with responsive design

My goal is to make pagination easily accessible on mobile devices for users of my website, similar to UIScrollView with paging enabled in iOS. However, it's important that the website remains functional and visually appealing on desktops as well. I h ...

ioscssmobilewebuiscrollview

- Prefixing with -webkit-transform and overlooking z-index

When using Safari 5.1.7 on Windows, I noticed that some rotated elements are overlapping others: However, when I test it on Firefox, Chrome, and IE, the issue doesn't occur: Is there a solution to prevent this overlap problem specifically on Safari? ...

htmlcsssafaritransform

Creating uniform line lengths with a ruler utilizing Fabric.js

I have a div that scrolls horizontally and contains a ruler div and a canvas where I draw horizontal lines of varying lengths. When drawing the lines, I want to ensure they are accurately measured against the ruler using JavaScript and CSS: var canvas = ...

javascriptjquerycsshtml5-canvasfabricjs

Issue encountered when attempting to select a button with selenium

I'm attempting to use Selenium to click on a button, but encountering an error in the process. The specific error message is shown below: https://i.stack.imgur.com/NQjnh.png This snippet of code represents the accessed HTML page: https://i.stack.i ...

pythonhtmlselenium

How to center a label vertically within a button group using Bootstrap

How can I vertically align labels for 2 inline elements inside a horizontal form without using hacks like display:table? So far, this is the code I have tried: bootply ...

htmlcsstwitter-bootstrapvertical-alignment