Challenges arise when arranging div boxes vertically

Here is my code snippet:

.blueleft {
    background-color: white;
    width: 300px;
    border: 25px #cee2e8;
    padding: 25px;
    margin: 40px;
    float: left;
    font-family: "berlin sans fb";
    color: gray; 
    font-size: 20px;
    text-align: center;
    vertical-align:middle;
}

.blueright{
    background-color: white;
    width: 300px;
    border: 25px #cee2e8;
    padding: 25px;
    margin: 40px;
    float: right;
    font-family: "berlin sans fb";
    color: gray; 
    font-size: 20px;
    text-align: center;
    vertical-align:middle;
}

Despite the styling, the boxes are appearing horizontally instead of vertically like this:

https://i.sstatic.net/Fzs8g.png

I am struggling to figure out how to stack the div boxes vertically while maintaining the ability to format them horizontally and keep them centered. I have searched for solutions but haven't found any code that works when inserted into my HTML document... How should I approach starting over with CSS formatting for the DIV elements?

Answer №1

Let's take a look at an example showcasing the power of Flexbox:

.flex-container {
  display: flex;
  flex-direction: column;
  background-color: DodgerBlue;
  height: 400px;
  align-items: center;
  justify-content: center;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</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

Verify whether the current location is within the circle

I am conducting a test to determine if my current location falls within a given radius of 300m. If it does, return true; otherwise return false. Below is the code I am currently using: <body> <button onclick="getLocation()"> ...

Initiate a function once the innerHTML content in Angular has been completely loaded

I'm curious to know if it's possible in Angular to receive a notification when the Inner HTML has finished loading. I have a web application that retrieves an SVG image from a server and I need to display it as innerHTML in order to interact with ...

Ways to avoid the cascading of CSS styles onto multiple Three.JS scenes

It seems like I might have to take the longer route to solve this issue, but let's give it a shot... I'm facing a challenge when applying CSS to control the opacity of a specific HTML element that acts as a container for a Three.JS scene. In thi ...

Meta tags are causing issues with HTML5 validation on the website

Striving to enhance the HTML validity of my website, I encountered several errors in the meta tags that are marked as invalid. Unfortunately, I am unsure how to modify them to rectify these errors. <meta http-equiv="X-UA-Compatible" content="IE=edge,ch ...

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

Using Jquery to switch between different CSS styles

I'm currently working with a jQuery code that is functioning properly. $(window).load(function() { $('.menuBtn').click(function(e) { e.preventDefault(); (this.classList.contains('is-active') === true) ? this.c ...

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 ...

Attempting to align the text perfectly while also adding a subtle drop shadow effect

Trying to center text with a drop shadow without using the CSS property. I'm utilizing span and :before for cross-browser compatibility. Here is what it currently looks like: The HTML: <h3 title="Say hello to Stack Overflow"><span>Say ...

Having difficulty moving the menu buttons to the right

Take a look at the code snippet below: https://jsfiddle.net/fcx0wkq3/1/ When you expand the result window, you'll notice the menu buttons on the left. I am trying to adjust the position of these menu buttons to bring them towards the center or the r ...

To grab a specific CSS attribute from a stylesheet using JavaScript

I am looking for a way to extract the value from a CSS file using a JavaScript function. Take a look at my code snippet below: HTML file -> <link rel="stylesheet" type="text/css" href="test_css.css" /> <script type="text/javascript ...

What are the steps for adding a photo to the folder directory on my hosting server?

Hey there! I've been having some trouble uploading a photo from my website to the hosting server's directory (/public_html/upload/) using php. No matter what I try, the folder remains empty. I'm stuck and not sure where I'm going wrong. ...

Adjusting the size of HighCharts HighMaps with a custom function

Simple query here (I believe) I have a DIV with the class "container" acting as my Map. The Highcharts plugin I'm using is responsive, but it only resizes when the window does. I'm looking to manually trigger a resize without adjusting my windo ...

Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...

Create another div for the remaining vertical space occupied by the sibling div?

I currently have 3 different divs nested within each other: <div class="a"> <div class="b"> </div> <div class="c"> </div> </div> Here is the current CSS styling applied to these divs: .a { hei ...

Ways to incorporate style links in Angular v2 components?

Currently, I am working through the Angular tutorial available on their website. In my quest to create various components, templates, and styles, I have hit a roadblock. The issue lies in incorporating my styles into the components using the 'styleUR ...

Preserving chosen options in a dropdown menu using PHP and HTML

I'm facing an issue with my code where the selected values in a dropdown menu revert back to default every time the page refreshes. How can I ensure that the selected values remain unchanged? Unfortunately, I am unable to utilize AJAX as per the user ...

The Spring Boot REST application is unexpectedly returning HTML instead of JSON, causing confusion for the Angular application which is unable to recognize the

I am struggling with my Spring Boot application that was generated using . I am having difficulty getting it to return JSON instead of HTML. Here is a snippet of the code: [@CrossOrigin(origins="http://localhost:4200",maxAge=3600) @RestController @Request ...

Employing conditional statements in conjunction with styled components

Is there a way to style my PaymentBtn with the main styled Button but only apply the hover effect when the isLoading prop is activated, without changing anything else? I want the styling to remain the same except for the hover effect. Basic button export ...

What is the process for customizing the arrow of a <select> dropdown menu exclusively?

Here is the code for a dropdown menu: <select id="dropdown"> <option value="">Go to page...</option> <option value="http://stackoverflow.com">CSS-Tricks</option> <option valu ...

Error: Encountered an unforeseen symbol '<' during AJAX request

I'm in the process of creating a JavaScript array to help me determine the online status of various streams. However, whenever I attempt to alert the output, I keep encountering an unexpected token '<' error at line 1 of my document. It&a ...