difficulty centering two divs inside a main container

I'm having some trouble aligning two divs within a main tag and another div side by side. I've attempted using various CSS properties like display:inline, flex, float, block, and flex-direction, but nothing seems to be working. Any assistance would be greatly appreciated. Thank you.

CSS:

<div class="flexbox">
       <main>  
            <div class="playlist-box">
                <div class="site-playlist">
                    ex
                </div>
            </div>
            <div class="right-column">
                <div class="main-heading">
                    What I've Been Up To:
                </div>
            </div>
       </main>
</div>
.flexbox {
    display: flex;
}


main {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
}

.site-playlist {
    height: 200px;
    width: 25%;
    margin-left: 0;
    padding-left: 5px;
    text-align: center;
    padding-top: 5px;
    overflow: scroll;
}

Answer №1

Applying the flex style to your main element is necessary.

.flexbox {
    display: flex;
}


main {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    display:flex;
}

.site-playlist {
    height: 200px;
    width: 100%;
    margin-left: 0;
    padding-left: 5px;
    text-align: center;
    padding-top: 5px;
    overflow: scroll;
}
.playlist-box {
  width:25%
}
.right-column {
  width:75%
}
<div class="flexbox">
       <main>  
            <div class="playlist-box">
                <div class="site-playlist">
                    ex
                </div>
            </div>
            <div class="right-column">
                <div class="main-heading">
                    What I've Been Up To:
                </div>
            </div>
       </main>
</div>

Answer №2

I am here to address your concerns:

<!DOCTYPE html>
<html>
   <style>
      .flexbox {
      display: flex;
      }
      main {
      width: 100%;
      flex-direction: row;
      flex-wrap: nowrap;
      display:flex;
      }
      .site-playlist {
      height: 200px;
      width: 100%;
      margin-left: 0;
      padding-left: 5px;
      text-align: center;
      padding-top: 5px;
      overflow: scroll;
      }
      .playlist-box {
      width:25%
      }
      .right-column {
      width:75%
      }
   </style>
   <body>
      <div class="flexbox">
         <main>
            <div class="playlist-box">
               <div class="site-playlist">
                  Placeholder text
               </div>
            </div>
            <div class="right-column">
               <div class="main-heading">
                  Recent Updates:
               </div>
            </div>
         </main>
      </div>
   </body>
</html>

Does this meet your expectations?

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

Making a full-width browser bar by utilizing negative margins

I've been following a tutorial and need help with my header element. I want it to have a max-width of 800px and be centered in the middle of the page. Inside the header, there will be a #filtersBar div that spans the entire width of the page. Here&apo ...

I am looking to remove all white spaces from my website's HTML code

I am looking to remove all white spaces from my website in html. The more I align my text to the right, the more whitespace it creates on the right side of the page. As seen in the images, there are a lot of whitespaces and I suspect that elements are caus ...

Move a div by dragging and dropping it without creating duplicates

I'm in need of some assistance. It seems like a simple task, but I'm having trouble finding a solution. I've managed to create draggable elements that work smoothly without any issues. The drag and drop functionality is working perfectly. ...

Position the buttons in the react children's application

**Looking for help on positioning Black Widow in the center-left and Hulk at the bottom left of the screen. I'm having trouble figuring it out, does anyone have any tips? Also, I only want to isolate the buttons to each picture. Not sure if I need to ...

Design a unique CSS box using Bootstrap

Hey there! I'm currently working on creating a CSS box with Bootstrap. If you'd like to take a look, feel free to check it out here. I noticed that the padding box isn't affecting the margin-top - any ideas why? Also, I'm trying to ge ...

- Utilize bullet points to exhibit keywords within a D3.js div by appending them

I'm looking to showcase the comma-separated values from a JSON file as a list in a mouseover tooltip on each node. Here is my current code snippet: div.append("div") .attr("class", "tooltip") .style("opacity", 1) .html("Node name : " + d.NodeName + ...

What is the procedure for closing a snackbar when the close button is clicked?

I am having trouble closing a snackbar when the close button is clicked. The snackbar should initially pop up on page load and only close when manually triggered. I have set the timeout to zero, but the snackbar does not close when the close button is clic ...

Acquiring the underlying code of websites within the local network

In the tool I am creating, it takes a URL as a parameter and retrieves the source code from that URL for analysis. The tool will be hosted on our domain, with the capability of analyzing web pages of sites within our internal network domain. Here is the Jq ...

Tips for arranging flex children on top of one another

I am looking to position and center both boxes so that they overlap in the middle of the screen, without specifying a fixed width and height. Additionally, I want to incorporate CSS transitions to make box 1 disappear and reveal box 2 upon clicking a butt ...

Website Translator

I'm currently working on a website that needs to be available in two languages. One option is to do our own translations, but that could end up requiring more time for development. That's why I am exploring the possibility of finding a suitable ...

The size of the popup does not align properly with the content within it

After creating an extension for Chrome, I specified the dimensions of the popup to be 600 x 300 px. Everything was working perfectly until Chrome updated to version 27. As shown in the screenshot, I set the width and height using CSS, but there is still a ...

Is there a way to center a div vertically without specifying the screen height?

Trying to create a slider that aligns both horizontally and vertically can be a tricky task. To achieve this alignment, I have implemented the use of display: flex; within the following code: body { display: flex; flex-direction: column; justify-c ...

Ways to dynamically insert a new row into a table based on user input in a Postman-like reactive table

Is there a way to dynamically insert a row when a single character is entered into an input field in the header tab, similar to how Postman functions? 1) If a user types any single character in the td of the first row, then a new row should be added below ...

When tapping on grid items in the Safari browser using React Material-UI, they mysteriously switch positions

I've encountered an issue with grid Items in my React MATERIAL-UI project, specifically in the Safari browser. The problem does not occur in Chrome or Firefox. Within the grid, there are checkboxes that move from one place to another when clicked, a ...

Before displaying the output, Flask first shows the HTML heading

I have developed a user input form that displays a graph after selection. The title of the graph result is 'Results,' however, it appears before the user makes a selection. Check out the screenshot below: https://i.sstatic.net/1WkZ4.png No sele ...

CSS creates gaps between each of the internal elements inside the HTML document

I'm looking to create a 4px space between all internal components within my HTML, regardless of direction (top, bottom, left, or right). I have attempted to achieve this by using an external CSS file with the following code: body { padding: 2p ...

Having trouble getting the img src to work in Django 2.1 template?

I'm having trouble displaying images in my Django template file. Despite uploading the images to media static files, they do not appear on the template. When I click on the image link in the Django admin page, it shows a "Page not found(404)" error me ...

How can I make a span take up the full width within a button using CSS?

Bootstrap and custom CSS are being used for buttons, but there is an issue. <button type="button" class="dropdown-item"> <span (click)="showI('test_data)" class="text-capitalize&q ...

When using NVDA (Accessibility Screen Reader) on Google Chrome, chances are that the text in a Bootstrap Modal Dialog may not be

To Test Accessibility: Click here for the NVDA Screen Reader test For 508/accessibility compliance, I am running tests using the NVDA Screen Reader. Currently, I have implemented "Info Dialog" boxes through Bootstrap Modal. While Firefox correctly reads ...

Splitting HTML content into pages according to the size of the content

I am currently working on a web application designed for editing documents. In this app, each document can consist of multiple pages, all following the standard paper size in Germany (DIN A4 with dimensions 210mm width x 297mm height). To ensure that the l ...