Four columns positioned next to each other (Navigation Bar)

I've been trying to get these divs to display side by side for a menu bar, but they keep stacking on top of each other. I've experimented with margin-right/left/top/bottom, padding, and more, but nothing seems to work. Any suggestions?

<div id="Menu" >
     <div id="M_1"><a id="M_1_L" href="P4.html">Given</a></div>
     <div id="M_4"><a id="M_4_L" href="P2.html">Received</a></div>
     <div id="M_3"><a id="M_3_L" href="P3.html">Bucket List</a></div>
     <div id="M_2"><a id="M_2_L" href="P1.html">Traditions</a></div>
</div>

Here's the CSS code:

#Menu
{
    width: 50%; height: 40px; background-color: blue; margin-left: auto; 
    margin-right: auto; margin-top: 20px; border-radius: 20px;
}

#M_1,
#M_2,
#M_3,
#M_4 {
    text-align: center; width: 20%; background-color: black;
}
csshtml

Answer №1

Combine the following for each item

 #M_1
 {
  display: inline-block;
  float: left;
}

If this layout is not accommodating all items, consider adjusting the width to 19% for one or more of them.

Answer №2

To align them properly, you should either use the CSS property float: left or set them to display: inline-block.

Answer №3

One way to streamline your CSS is by consolidating selectors.

#navigation-bar{
    display: table;
    width: 50%;
    height: 40px; 
    background-color: blue;
    margin: 20px auto; 
    border-radius: 20px;
}
#navigation-bar > div{
    text-align: center; 
    background-color: black;
    display: table-cell;
}

Answer №4

The optimal course of action would be:

    <ol>
    <li><a href="page5.html">displayed</a></li><li>
    <a href="page6.html">hidden</a></li>
    </ol>

Ol {
   Width:60%;
   Height:50px;
   Background: green;
   Margin: 0 auto;
   }

Ol li {
    Display:inline-block;
    Width:25%;
    Background:#333;
    Text-align: center;
    }

Placing the closing and opening tags next to each other prevents inline-block from creating a gap between the elements.

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

`Why won't the checkbox uncheck when the dropdown is changed in jQuery?`

I have a roster of users, each with a unique checkbox for selection. When I adjust the dropdown menu, a new group of users is chosen and marked as selected. However, I am struggling to uncheck the previously selected checkboxes based on the last dropdown c ...

javascriptjqueryhtmlcheckboxdrop-down-menu

The background-repeat property in CSS appears to cease functioning when the container becomes too wide

Exploring various combinations of space and round values for background-repeat, I've discovered a way to utilize radial gradients to create a visually appealing dotted border on an element without having the dots cut off. .test { background-repeat: ...

csssafaribackground-imagebackground-repeat

Emails can be sent through a form without the need for refreshing

I am currently working on a webpage that utilizes parallax scrolling, and the contact box is located in the last section. However, I encountered an issue where using a simple HTML + PHP contact box would cause the page to refresh back to the first section ...

javascriptphpjqueryhtml

Angular: Dividing a web page with its individual controller

Exploring Angular Composition An individual new to Angular is eager to implement the concept of "composition," where the main page contains various smaller web page components. Starting off with just a Header section that binds perfectly. <html> &l ...

javascripthtmlangularjs

Troubleshooting a problem with the Bootstrap dropdown menu

Can anyone assist with an issue regarding Bootstrap 4.4.1? I am facing a problem where two consecutive dropdown links+menus are not displaying correctly. The second dropdown menu is showing the content of the previous link instead of its own, even though t ...

cssbootstrap-4

Encountering the error "undefined object" while using the yield keyword in JavaScript

var pi = document.getElementById("pi"); function * calculatePi(){ let q = 1; let r = 0; let t = 1; let k = 1; let n = 3; let l = 3; while (true){ if (4*q+r-t < n*t){ alert(n); yield n; ...

javascripthtmlgeneratoryield

The colgroup tag is present in the code, but strangely absent from the view source or debugger tool

In a curious twist from this question Why does Firebug add <tbody> to <table>?, I have encountered a similar issue that may lead to the same answer, but I am seeking confirmation. Within my code, there is a colgroup element that mysteriously d ...

c#htmlhtml-tablecolgroup

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

cssbuttonmouseevent

How to set up a Carousel as the background within a div using Bootstrap 5

I'm attempting to create a visually appealing layout by showcasing a Carousel component behind some text. The idea is to have scrolling and fading images with a prominent header overlaid on top of them. I want the carousel images to be contained withi ...

htmlcssbootstrap-5

Align the radio button, dropdown menu, and checkbox in a single row

I'm attempting to align a radio button, dropdown, and checkbox on the same line where the second radio button is displayed. I'm utilizing Bootstrap 4, but I'm open to plain HTML that doesn't necessarily follow Bootstrap styling. I trie ...

htmlcssbootstrap-4

Using CSS to add a resize handle and implement mouse events in Chrome

While experimenting with the resize property in CSS, I encountered an issue. I have a div that contains a canvas element. .resizable { resize: both; overflow: hidden; border: 1px solid black; } div { height: 300px; wi ...

css

Can someone guide me on incorporating a plus/minus feature into Django forms?

What is the best way to integrate this into a Django form? 2/3: 2 represents the currently selected number of items, while 3 is the maximum allowed Note that this form does not interact with the model; instead, it sends data to the Redis server upon cl ...

htmlpython-3.xdjangodjango-forms

Unusual Behavior of CSS and JQuery Selectors

As I was working with jquery selectors, I encountered something quite unexpected. This is an example of my HTML: <ul id="unordered-list"> <li> <img src="https://www.google.com/images/srpr/logo4w.png" width="40" height="40"/> ...

jquerycssjquery-selectorscss-selectors

The background image is being cropped outside the item. What steps should I take to display it properly?

I am facing an issue with positioning a background image just outside the lime container. When I position it correctly, any part of the image that extends beyond the container gets cut off. How can I display the whole image even if it is outside the conta ...

csshtml-listsbackground-image

Importing for the purpose of minimizing and combining CSS files is not functioning as expected in conjunction with the h5bp

After configuring my main.css to import two style sheets using the @import rule, I ran into an issue. The H5BP build script minified and concatenated the main.css, but the imported files were missing. I double-checked the build script's config to ens ...

cssbuildhtml5boilerplate

The JavaScript code malfunctions when I introduce a new HTML tag

I am attempting to create a simple photo gallery using PhotoSwipe. However, I have encountered an issue where certain functions like Previous and Next buttons stop working when I add new HTML elements. Here is the original code: <div class="my-gallery ...

javascriptjqueryhtml

Difficulty arises when attempting to pass a PHP variable as an argument within a MySQL query

My current task involves using a PHP variable as a search term in querying a MySQL database. First, I retrieve the variables from an HTML form: <?php //Set up variables $vals = array($_POST["id_number"], $_POST["id_name"], $_POST["id_submitname"]); $ke ...

phphtmlmysqldatabase

React Icons and Browser Tab Alerts

Is there a way to incorporate notifications into my website's favicon when the browser tab is not in focus? My tech stack includes React, Material UI, and TypeScript. I assume this is a frequent requirement, yet I haven't come across a simple so ...

htmlreactjsnotificationsmaterial-uifavicon

Utilizing Consistent Styles Across Multiple Components within an Angular 2 Application

In my Angular 2 app, I have some CSS rules that are shared among multiple components. I don't want to duplicate these rules in each component's styles. Currently, I am considering two approaches: Storing common CSS rules in a static CSS file an ...

cssangulartypescriptstylesheet

Automatic line breaks in MathJax when displayed in a modal dialogue box

As part of a math project, I need to display the solution of a problem in a Sweetalert2 modal. However, despite using the following code: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$ ...

javascripthtmlcssmathjaxsweetalert2