Arrange several containers side by side (constant width)

My goal is to align three divs within a custom MainDiv in order to achieve the desired layout shown here: https://i.sstatic.net/5kDsW.png

<div style="position: fixed; width:100%; height: 12%; left:0%; top: 0%; background: black">
  <div style="color: white; left: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION A</div>
  <div style="color: white; margin:0 auto; margin-top: 5%; display: table; font-size: 10px">INFORMATION B</div>
  <div style="color: white; right: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION C</div>
</div>

Unfortunately, the current code I have doesn't seem to be working as intended, resulting in this output: https://i.sstatic.net/bLeX2.png

What steps can I take to troubleshoot and fix this issue?

javascripthtmlcssalignment

Answer №1

Flex layouting is a great technique to use

<div style="position: fixed; width:100%; height: 50%; left:0%; top: 0%; background: black; display: flex; justify-content: space-between;">                           
  <div style="color: white; left: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION A</div>
  <div style="color: white; margin:0 auto; margin-top: 5%; display: table; font-size: 10px">INFORMATION B</div>
  <div style="color: white; right: 5%; margin-top: 5%; position: fixed; font-size: 10px">INFORMATION C</div>
</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

Difficulty with integrating DIVs with floating SPANs

My current form is very basic and includes the following: <div class="datepicker"> <p> From: <span class="spanMonth"> <div id="div_dateFromReports_month"> <select></select> ...

htmlcss

Utilizing Bootstrap accordion to trigger distinct actions on elements within open and close cards

Currently, I am designing an accordion using Bootstrap 4. Each card header in the accordion has a background image that needs to be hidden when its corresponding body is open and shown when it is closed. The objective is to display all images on closed ca ...

javascripthtmlbootstrap-4accordionbootstrap-accordion

How to extract only the truthy keys from an object using Angular.js

I am looking to retrieve only the keys with a true value in the data object and display them in the console with the specified format: Object { Agent=true, Analytics / Business Intelligence=true, Architecture / Interior Design=false } The catego ...

javascriptangularjs

Is it possible to make a model draggable but disable it specifically on input fields?

I'm exploring the implementation of a draggable feature by using both a JavaScript directive and the simple draggable="true" attribute. (Testing each method separately). Here's my basic code structure: <div draggable="true& ...

javascripthtmltypescript

Show a specific item when selecting an option from a dropdown menu

Hey there, I have a question regarding creating a theme for the Genesis Framework. Right now, I'm facing a challenge with one particular element. Here's the situation: I've got two drop-down lists, but I only want the second one to be visib ...

javascriptjqueryhtmlwordpressdrop-down-menu

Angular - Navigate to Login Page post registration and display a confirmation message

As a newcomer to Angular, I am currently working on an Angular and Spring Boot application. So far, I have created components for user login and registration along with validation features. Now, my goal is to redirect the user to the login page upon succes ...

javascriptangulartypescript

Is the Wordpress search bar a clickable link?

Whenever I attempt to click on the search box, it redirects me to the comments section of a post as if it were a link. It's difficult to provide more information about this issue, but the problem occurs on the website lbk.newcoastmedia.com/wordpress w ...

htmlwordpresswordpress-theming

Creating curved arcs within a polyline by utilizing the bulge feature in THREE.JS

Currently, I am importing a CAD file from a DXF format and I am looking for a way to draw an arc between two arbitrary points with a bulge value. My approach involves using THREE.Line to create segments of the arc. This resource outlines some of the essen ...

javascriptmaththree.jscad

Can HTML support the creation of this table?

Is it possible to create this table layout using HTML? Here is what I have attempted in Reactjs: https://i.sstatic.net/Wuw8e.png I am encountering errors while trying to implement a colspan. The desired layout I want to achieve is shown here: https://i ...

htmlreactjs

Inspect the render function in the 'RestApi' class

I encountered the following error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined ...

javascriptreact-nativeexpo

What is the procedure for downloading a file within a brackets-shell application?

Currently, I am utilizing Brackets-shell to develop a desktop packaged application designed for both Windows and OSX. This application, which operates within the Brackets shell environment, has the capability to access dynamically generated Excel sheets an ...

htmliframebrowseradobe-bracketsbrackets-shell

Display a custom dropdown menu depending on the value chosen from a separate dropdown menu

There are three dropdown lists, each enclosed in its own DIV container. The DIV containers are named fromCity, WithinStateLimits, and OutOfState. The goal is to use the jQuery script below to hide the other two DIVs when a user selects an option from the ...

javascriptjquerycssasp.net

Customizing Bootstrap to automatically display a modal without the need for a button click

According to the Bootstrap website, modals are typically triggered using buttons. As I am working with React, I would like to control when the modal is displayed using JavaScript. Is there a way to have the modal appear by default? Here is the code snip ...

javascriptcssreactjsbootstrap-4

What is the best way to adjust the size of the close button in react-bootstrap for a unique design?

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

cssreactjsreact-bootstrap

How does the position of the scroll affect the height of an element on a webpage

Currently, I'm exploring the 'scroll' eventlistener in web development to incorporate some motion design elements into my projects. For this particular experiment, I am making a div element react to the user's scrolling actions on the p ...

javascripthtmlcss

How can I stop the setinterval function in JavaScript?

My issue revolves around intervals. Upon declaring a function with setInterval, I find that even after clearing the interval, the function continues to execute. Here is my code: if (score == 1) { leftBlinkTimer(0) } else if (score == 0) { leftBlin ...

javascriptvue.js

Converting HTML to Plain Text in Vue.js

Is there a way to convert HTML to plain text using vuejs? <ol> <li>The quick brown fox jumps over the lazy dog</li> <li>The quick brown fox jumps over the lazy dog</li> <li>The quick brown fox jumps over the ...

javascripthtmlcssvue.js

"Enhance your audio experience across all browsers with the revolutionary

I am looking for a way to play an mp3 file endlessly when the user opens my website. I need a lightweight crossbrowser solution that works in all browsers, including IE. Any suggestions? ...

javascriptjqueryhtmlcssmp3

What is causing the browser to freeze in this infinite JavaScript loop?

I'm struggling to figure out why the browser is freezing up and getting stuck in the initial for loop within this function. Even when I try using arguments.length, it doesn't seem to log anything in the console. Take a look at the click function ...

javascriptjquery

Upon clicking a link, the webpage will automatically scroll to a specific point

As I work on creating my website, I have come across a specific need: I currently have a menubar with a dropdown menu. Inside this dropdown, there are 4 different options. These options are all located on the same page. What I would like to achieve is tha ...

htmlwebanchorhref