Align three divs vertically within one div, all floated to achieve the desired layout

Can someone help me align three divs vertically within a container div? The challenge is that all three divs inside the container are floated - one on the right, one in the center, and one on the left to create a navbar.

I've seen the navbars in Bootstrap and I would like to combine three navbar divs into one to create a single navbar.

I'm new to HTML coding, so any assistance would be greatly appreciated.

.container {
  width: 100%;
  font-size: 11px !important;
}

.sinistra {
  float: left;
  width: 30%;
  height: 7%;
  background-color: white !important;
  line-height: 10%;
  vertical-align: center;
}

.centro {
  display: inline-block;
  margin: 0 auto;
  width: 30%;
  height: 7%;
  line-height: 10%;
  vertical-align: center;
}

.destra {
  float: right;
  width: 40%;
  height: 7%;
  line-height: 10%;
  vertical-align: center;
}

a {
  font-size: 11px !important;
}
<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b5954544f484f495a4b7b0e7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auAUtT94WrHftjDbrCEXSUBoBoqyl2QvtZ6IW3" crossorigin="anonymous"></link>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e707f607d">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7SkGln4gmtz2MlignikTtwXgYsOgedhuPIdRH9ENBO0LRn5qn+8nbTo4+1vp" crossorigin="anonymous"></script>
</head>

<body>
  <div id="container">
    <div class="sinistra">
      <a class="navbar-brand" href="#">
        <img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top"> Aaaa
      </a>
    </div>
    <div class="centro"> <a>aaa</a></div>
    <div class="destra">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link disabled" aria-current="page" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item" href="#">Separated link</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</body>

Answer №1

Let's bid farewell to floats once and for all in the name of everything sacred. They're outdated, problematic, and completely contradictory to the Bootstrap layout system ethos. Any guide that advocates for their use should be dismissed without hesitation.

Furthermore, it appears that you're reinventing the wheel here. Everything you need is readily available out of the box.

Here's the solution:

  1. Follow a proper container/row/column structure as detailed in the official documentation.
  2. Add the class align-items-center to the row for vertical content alignment.
  3. Assign the flex-fill class to the menu column to make it occupy all available space. Additionally, I've used the justify-content-end class on the nav element to right-align its tabs.

No custom CSS required whatsoever!

<head>
  <link rel="stylesheet" href="style.css">
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fe9c91918a8d8a8c9f8ebecbd0cfd0cd">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a2825253e393e382b3a0a7f647b6479">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row flex-nowrap align-items-center">
      <div class="col sinistra">
        <a class="navbar-brand" href="#">
          <img src="https://via.placeholder.com/50" alt="" width="30" height="24" class="d-inline-block align-text-top"> aaaa
        </a>
      </div>

      <div class="col centro">
        <a>aaa</a>
      </div>

      <div class="col flex-fill destra">
        <ul class="nav nav-tabs justify-content-end">
          <li class="nav-item">
            <a class="nav-link disabled" aria-current="page" href="#">Active</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">Action</a></li>
              <li><a class="dropdown-item" href="#">Another action</a></li>
              <li><a class="dropdown-item" href="#">Something else here</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item" href="#">Separated link</a></li>
            </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link">Disabled</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</body>

Answer №2

Utilize flexbox for layout

#container{
  display:flex;
  flex-direction:column;  
  align-items:center;
  width:100%;
  height:30vh;
  justify-content:space-evenly;
  
  }
  
  div{
  border:solid 2px red;
  width:25%;
  text-align:center;
  
  }
<div id='container'>
  <div>a</div>
  <div>b</div>
  <div>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

The picture won't stay within the confines of the container

As I work on my fitness site, I wanted to incorporate a sponsor section. While exploring some code that matched the style of my website, I discovered this snippet below. However, being new to CSS, I struggled with fixing it to ensure that the images fit ...

"Encountering an issue when linking the file with phpMyAdmin

I've been struggling with this issue for hours now. I'm currently working on a registration form for my website and while coding in PHP, I connected it to MySQL and the Database using this line of code (which happens to be the 6th line): $mysq ...

Encountering the "Local resource can't be loaded" error when attempting to link a MediaSource object as the content for an HTML5 video tag

I'm attempting to make this specific example function properly. Everything runs smoothly when I click the link, but I encounter an error when trying to download the HTML file onto my local machine and repeat the process. An error message pops up sayi ...

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

Choosing a single item from multiple elements in React using React and typescript

In this particular project, React, TypeScript, and ant design have been utilized. Within a specific section of the project, only one box out of three options should be selected. Despite implementing useState and toggle functionalities, all boxes end up bei ...

saving selected values to the database

I have updated the question, thank you for your help. The code seems to be working fine but I need some assistance with increasing the booked count in the database when the user clicks "Confirm Choices." Additionally, if the user selects a booked image, ...

Activating events with Jquery

Can anyone help me with this HTML and jQuery issue I'm facing? When I click on an image for the first time (when it has the class 'hide'), the first jQuery click function is executed. However, when I click on the image again, the second func ...

Add a div element only if there is a background image present

I am facing a situation where I need to display an image as the background of a div only if it is available. If the image is not present, I do not want the div to be visible at all. I am working with django templates and here is my current approach: {% if ...

What is the most effective method for implementing a background repeated image in Foundation 4 framework?

Currently, I am utilizing the foundation4 framework for my website. In order to achieve a repeating tiled background, I have crafted a custom CSS file and included the following code snippet: body { background: url(img/floorboardsbg.jpg) repeat; } Whi ...

Learn how you can efficiently send a JSON response to an AJAX call by utilizing a serialized object along with HTML generated from the Html

Using C# and MVC, I am working on responding to an ajax call triggered by Jquery. My goal is to send back an object that includes a List<int> as well as some HTML code generated using a HtmlHelperExtension that I developed. Previously, I was only se ...

What is the most efficient way to send multiple arrays by selecting checkboxes?

Currently, I am faced with a challenge where I have a selection of items from a list that need to be submitted in the form of three different arrays with distinct values to PHP. These arrays include: Device id, Client comment, and Manufacturer comment. < ...

Provide the option to assign values on select options in order to choose specific JSON data

When working with JSON data from an API, I am creating a dynamic select element. The goal is to change some content (text and image src) based on the option selected from this select element. I have successfully populated the select options with names usi ...

Toggle element visibility upon clicking

<table id="selectsupp"> <tr> <td> <select id="category"> <option value="display" readonly="true">-Shop By Category-</option> <option value="all">All</option> <option val ...

How can I make col-8 and col-4 display next to each other?

Here is the code snippet I recently submitted: <section class="main-container"> <div class="grid-row no-gutters"> <div class="column-8"> <img class="full-width-img& ...

What are the steps to play this using Internet Explorer?

I am having trouble with my player code in Internet Explorer. Can anyone provide assistance on how to make it work across all browsers? <object data="http://bitcast-b.bitgravity.com/player/6/bitgravity_player_v6_1_4.swf" id="bitgravity_player_6" ...

What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website, As an example: <div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664 ...

The perspective property creates discrepancies in transform behavior between Firefox and Chrome, resulting in unexpected outcomes

While I found a similar question here, the solutions provided are outdated and do not help in my case. My issue revolves around a turning page effect that utilizes the CSS properties of transform-style:preserve-3d and perspective to create a 3D page. The ...

Enhancing Bootstrap Slider Range with jQuery/Javascript

Currently, I have incorporated the Bootstrap slider into a webpage that features two sliders on a single page. The range of the second slider depends on the value of the first one. It is crucial for me to be able to update the range of the second slider af ...

Increase transparency of scrollbar background

Is it possible to adjust the opacity of a scrollbar track? I attempted to use opacity:0.5, but it didn't have any effect. I am using material UI styled, although I don't believe that is causing the issue. const Root = styled('div')(({ ...

Why are the random colors blending into the image?

After watching a tutorial on the YouTube channel Online Tutorials titled "Change Image Color Vanilla JavaScript," I am confused as to why some random colors from the click event are overlapping the image instead of just changing the color of the cat's ...