What is the best way to align multiple container elements alongside the sidebar?

My problem is that small squares on my page are appearing way below where I want them to be, leaving a lot of white space above. I've tried setting them to position: fixed;, but then everything slides off when scrolling down the page. Any suggestions on how to fix this? I've included the HTML and CSS below. https://i.sstatic.net/7Cw2s.png

.container1 {
  background-color: #f1f1f1;
  height: 150px;
  width: 150px;
  padding: 20px;
  border: 1px solid #bfbfbf;
  margin: 10px;
}

.container-fluid {
  float: right;
  padding-left: 320px;
  padding-right: 20px;
}

.wrapper .sidebar {
  width: 300px;
  height: 100%;
  background: #f1f1f1;
  border: 1px solid #bfbfbf;
}

.wrapper .sidebar ul li a {
  color: black;
}

.sidebar ul {
  display: flex;
  flex-direction: column;
  padding-left: 0px;
  padding-top: 20px;
}

.sidebar ul li a {
  padding-top: 0px;
  padding-bottom: 0px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e7858888939493958697a7d3c9d1c9d7">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="wrapper">
  <div class="sidebar col-xs-0">
    <ul>
      <li><a href="/listing">Listing</a></li>
      <li><a href="/listing">Listing</a></li>
      <li><a href="/listing">Listing</a></li>
      <li><a href="/listing">Listing</a></li>
      <li><a href="/listing">Listing</a></li>
      <li><a href="/listing">Listing</a></li>
    </ul>
  </div>
</div>

<div class="container-fluid">
  <div class="row">
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
  </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

To create a well-organized layout, I suggest utilizing the grid system in HTML. Here's an example structure you can follow:

If you're unsure about the Bootstrap version you're using, this reference link may help: https://getbootstrap.com/docs/5.0/examples/dashboard/

.container1{
    background-color: #f1f1f1;
    height: 150px;
    width: 150px;
    padding: 20px;
    border: 1px solid #bfbfbf;
    margin: 10px;
}


.sidebar{
    height: 100%;
    padding: 10px;
    background: #f1f1f1;
    border: 1px solid #bfbfbf;
}

.sidebar ul li a{
    color: black;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container-fluid">
  <div class="row">
    <div class="sidebar col-2">
        <ul class="list-unstyled">
          <li><a href="/listing">Listing</a></li>
          <li><a href="/listing">Listing</a></li>
          <li><a href="/listing">Listing</a></li>
          <li><a href="/listing">Listing</a></li>
          <li><a href="/listing">Listing</a></li>
          <li><a href="/listing">Listing</a></li>
        </ul>
    </div>
    <main class="col-10">
      <div class="row">
        <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
        <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
        <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
        <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
        <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
        <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
      </div>
    </main>
  </div>  
</div>
</body>

Answer №2

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8defe2e2f9fef9ffecfdcdb9a3bba3bd">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="dropdown">
  <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
</div>
  <div class="row">
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
    <div class="container1 col-md-2 col-sm-2 col-xs-12"></div>
  </div>

If you're unfamiliar with using a drop-down menu, here is a helpful reference: https://getbootstrap.com/docs/4.0/components/dropdowns/

Answer №3

To improve your skills, consider delving deeper into Bootstrap. Properly utilize the grid system provided by Bootstrap to avoid errors in HTML structure.

Implement the following:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a8cac7c7dcdbdcdac9d8e89c86e8698">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="sidebar col-xs-12 col-md-4">
      <ul>
        <li><a href="/listing">Listing</a></li>
        <li><a href="/listing">Listing</a></li>
        <li><a href="/listing">Listing</a></li>
        <li><a href="/listing">Listing</a></li>
        <li><a href="/listing">Listing</a></li>
        <li><a href="/listing">Listing</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-md-8">
      <div class="container1 col-md-2 col-sm-2 col-xs-12">
      </div>
      <div class="container1 col-md-2 col-sm-2 col-xs-12">
      </div>
      <div class="container1 col-md-2 col-sm-2 col-xs-12">
      </div>
      <div class="container1 col-md-2 col-sm-2 col-xs-12">
      </div>
      <div class="container1 col-md-2 col-sm-2 col-xs-12">
      </div>
      <div class="container1 col-md-2 col-sm-2 col-xs-12">
      </div>
    </div>
  </div>
</div>

Consider eliminating the CSS declaration of container-fluid, as well as organizing the .container1 elements for better clarity.

Maximize the potential of Bootstrap by utilizing its features and helpers effectively.

Explore their official website for further insights.

Answer №4

Missing parent element in the code

To make it work properly, add display: flex to the parent of the wrapper

Alternatively, you can try the following:

.wrapper, .sidebar {
    float: left;
}

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

Tips for placing <div .right> above <div .left> when the window is small, given that <div .right> is positioned to the right of <div .left> when the window is large

I've come across a similar layout before, but I'm struggling to replicate it myself. The idea is to have text aligned on the left side with an image floated to the right. Instead of the image appearing below the text when the window size is red ...

javascriptjqueryhtmlcss

Issue with sticky navigation bar causing page content to shift

Any ideas on how to solve my issue with a sticky nav bar in Twitter Bootstrap? Whenever I scroll past a certain point, the navbar sticks but causes my content to jump. I want the content to stay in place without jumping. Here is my HTML code: <body> ...

jquerycsstwitter-bootstrap

Removing HTML tags from Angular template bindings

My data list sometimes includes HTML elements <li *ngFor="let result of results"> <span [innerHTML]="result.question.title"> </span> </li> The issue with using innerHTML is that the HTML is parsed and rendered, affecting ...

htmlangularangular2-template

Incorporating additional options onto the menu

I recently designed a menu on https://codepen.io/ettrics/pen/ZYqKGb with 5 unique menu titles. However, I now have the need to add a sixth title to the menu. After attempting to do so by adding "strip6" in my CSS, the menu ended up malfunctioning and looki ...

javascripthtmlcss

Browser extension for customizing the information on a webpage

I have a vision of developing a unique Chrome extension that has the ability to modify specific content on designated webpages. My aim is to transform something like the following: <td class="Data">Phone:</td> into something more interactive ...

javascripthtmlgoogle-chrome-extensiontitle

The CSS code for creating a typing effect is not functioning properly

I'm having some trouble with a code snippet I wrote to create a typing effect on hover within a div. Here's the code: .about-panel:hover p { color: white; font-size: 1em; white-space: wrap; overflow: hidden; -webkit-animat ...

htmlcssweb

Opening a Text File via an ASPX Web Page

Currently, I am immersed in a Web Pages project. The goal is to retrieve text from a Text File and display it within a div element. To achieve this, I utilized the ajax xmlhttprequest method, following a tutorial available at http://www.w3schools.com/ajax/ ...

javascriptjqueryhtmlasp.netajax

Set the div to have a position of absolute, disregarding any other parent divs that may also have position absolute set

Is there a way to bring an outsider class <div> to the front of all others, even when all <div> elements are set as position: absolute;? How can the .free-object, which is inside .left, overlap both .left and .right? I have tried using z-ind ...

css

Personalize the code for tab navigation by incorporating href links

Original HTML Code The following HTML code is designed for a table, but I require it to be used for anchor elements. <table> <tr> <td>click me</td> </tr> <tr> <td>click me</td> ...

javascripthtmlangularjs

Differences between using Node.js with Express and EJS on Ubuntu and Raspbian systems

I've set out to create a small calendar using Express and EJS on Node.js. Everything was running smoothly on my laptop (Ubuntu). However, when I transferred the project to my Raspberry Pi to host the web server on my home network, an error was throw ...

htmlnode.jsexpressraspberry-piejs

What's the best way to restrict characters in a paragraph?

I am working on an Angular application and I need to restrict the number of characters in a paragraph (p) to 50, after which it should break to a new line. Here is the template I am using: <section class="echeq-element-html-display border-box" [ng ...

javascripthtmlcssangular

Creating a Javascript function to turn lights off using CSS manipulation, similar to the feature found

Is there a way to use JavaScript to obscure all elements on a page except for one specific HTML element? This web application is optimized for Chrome, so CSS3 can also be utilized. ...

javascriptcss

Connecting an image to its corresponding content through hover effect

Can someone please assist me? I am trying to create a hover effect on an image with an "add to cart" link similar to what is shown here: I seem to be having trouble with the code, could you provide some guidance? .hunderter { background: url(http ...

csshover

Arranging Bootstrap divs vertically and then horizontally in mobile view

My website layout is relatively straightforward. It consists of a header at the top, a navigation bar with an image inside a column on the left, and the main content displayed on the right side. https://i.stack.imgur.com/yYzaG.png For mobile responsive vi ...

htmlcssbootstrap-4responsive

Tailwind's implementation of CSS Grid allows for the creation of a grid structure where specific cells can be selectively populated

I am currently using Tailwindcss with my Next.js application to showcase multiple images retrieved from a Supabase database in a grid layout. However, I am facing a problem where the images are being displayed in rows instead of columns within the grid whe ...

cssnext.jsgridtailwind-csscss-grid

When I expand one panel, I want to automatically close any other opened panel to ensure only one section is expanded at a

I'm experiencing an issue with the Bootstrap 4 accordion. Currently, when I open a collapsed section in the accordion, it remains open even when I click on another collapsed section. What I actually want is for the previously opened section to close ...

htmlbootstrap-4

Having some trouble with my React and MUI project - the button animation isn't functioning as expected when clicked

After implementing a Button from MUIv5, I noticed that the full animation only triggers when I hold down the button instead of with a simple click. Is there a way to fix this so that the animation fully plays with just a single click? Any help is apprecia ...

cssreactjsmaterial-uicss-transitionsjss

Is there a way to retrieve the disabled drop-down field value after submitting the form?

I'm struggling with a dropdown field that becomes disabled once an item is selected. After submitting the form, the dropdown field loses its value and I'm left with an empty field. Any suggestions on how to keep a value in the dropdown after subm ...

javascriptcssjquery

The Yeoman/Grunt-usemin is failing to update the index.html file even after adding new JavaScript code

As I work on developing a web app using Yeoman and the Angular generator on Windows 7, I go through the process of running 'yo angular' followed by 'grunt' to build the app for deployment. The index.html file in the dist folder gets upd ...

javascripthtmlnode.jsyeoman

Change your Bootstrap 4 navbar to a two-row layout using Bootstrap 5

Looking to update the navbar from Bootstrap 4 to Bootstrap 5 with two rows I came across this code snippet that works well for me in Bootstrap 4: https://codepen.io/metismiao/pen/bQBoyw But now I've upgraded to Bootstrap 5 and need help converting it ...

cssbootstrap-5