Elements with inline-block display not aligning horizontally next to each other

I am puzzled as to why the two sections, section.structure and section.specificity, are not aligning properly. It seems that when I reduce the width, they line up correctly at a certain point which I haven't identified yet.

My goal is to have the width set around 500px for each block, or roughly half of the screen width each. However, when I attempt this, they end up stacking on top of each other instead of side by side. Any suggestions?

HTML

<main>
      <section class= "structure">
      
      </section>

      <section class= "specificity">
      
      </section>

CSS

section.structure {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245, 245, 245);
    display: inline-block;
}

section.specificity {
    border-radius: 20px;
    height: 500px;
    width: 500px;
    background-color: rgb(255, 255, 255);
    margin: 10px;
    border: rgb(245, 245, 245);
    display: inline-block;
}

Attempting to change width measurements and vertical-align did not yield any changes in the layout.

htmlcss

Answer №1

To avoid using display: inline-block, consider utilizing flexbox for more flexibility in your layout.
If you want to add space between elements, try using the gap property instead of fixing the height and width in pixels, which can cause responsiveness issues. HTML:

main {
  display: flex;
}

section {
  border: 1px solid red;
  width: 50%;
  height: 100vh;
}
<main>
 <section class="structure">hi</section>
  <section class="specificity">hello</section>
</main>

Answer №2

Here's a different approach that incorporates flexbox, similar to the previous solution. I found inspiration from this website.

main {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

section.structure {
  border-radius: 20px;
  background-color: pink;
  margin: 10px;
  border: rgb(245, 245, 245);
}

section.specificity {
  border-radius: 20px;
  background-color: lightblue;
  margin: 10px;
  border: rgb(245, 245, 245);
}

section {
  width: 500px;
  height: 100vh;
}
<main>
  <section class="structure">
    test
  </section>

  <section class="specificity">
    test
  </section>
</main>

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

Employing negative margin to connect div1 to the left side of div2

Is there a way to attach a dismiss button to the left of a contact in a sidebar? I am trying to achieve a layout similar to the one shown in this image: https://i.sstatic.net/jJE3h.png I attempted using margin-left: -50px; or left: -50px;, but the dismiss ...

htmlcssmargin

What is the best way to achieve full width for text on large screens in Bootstrap 3 while eliminating right margins?

I've been attempting to create a full-width text display on large screens using Bootstrap, but despite utilizing container-fluid and trying solutions from StackOverflow that should enable full width, there still remains whitespace at the right side of ...

csstwitter-bootstrap

Tips for creating a dashed border line that animates in a clockwise direction when hovering

I currently have a dashed border around my div element: .dash_border{ border: dashed; stroke: 2px; margin:20px; } My goal is to make the dashed lines move clockwise when my pointer hovers over the div element and stop moving ...

javascriptjqueryhtmlcss

After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html> <html> <head> <title>Registration</title> <link rel="stylesheet" type="text/css" href="styles.css"> <link rel="stylesheet" type="text/css" href="bootstrap.css"> <link href ...

htmlcss

The functionality for the "OnChange" event in the <html:select> field does not seem to be functioning properly

My JavaScript function isn't functioning properly. I can't see any alert messages on my webpage. Can someone please assist me? Below is my HTML code function checkProjectStatus() { alert("Helloo"); var dropdownType = document.getElementById( ...

javascripthtml

how can a select dropdown be dynamically displayed based on the previous selection?

If the first dropdown is set to "Professor" I want to display a second dropdown, but if it is set to "Student" then I do not want to display the second dropdown. function checkPrivilege() { var privilege = document.getElementById("permisija5").value; ...

javascripthtmlfunctionselectdrop-down-menu

Strange outcomes observed with array created from HTML code

html : <input type="text" name="ps[part1['test']]" value="testing multiple array"> Current result : [ps] => Array ( [part1['test'] => testing multiple array ) Expecting result : [ps] => Array ( ...

phphtmlarrays

Triangle Top Megamenu Design

Currently, I am implementing a navbar in bootstrap v4.4.1 that includes a mega menu dropdown feature. In my design, I want to include a triangle at the top of the dropdown menu. While I have managed to add the triangle successfully, I am facing difficulti ...

cssbootstrap-4drop-down-menumegamenu

Tips for creating a full-screen background image using HTML and CSS

I am looking to achieve a full-screen background image using HTML and CSS. I have configured all the necessary properties for the background image. Here is where my background image is located: [![enter image description here][1]][1] I have attempted to ...

htmlcss

After installation, the Tailwind classes seem to be malfunctioning

Let me start by mentioning that although the title of this question is reminiscent of this other question on Stack Overflow, I have already tried the solutions provided there with no success. I initially attempted to set up Tailwind using their official C ...

htmlcsstailwind-css

Show 1 Blog Post on a Separate AngularJS Page

I would like to show only Test Post 1 on the next HTML page titleDetails.html when the user clicks on Test Post 1 in index.html 1) titleDetails() in index.html: <a ng-click="titleDetails(post)">{{ post.title }} </a> 2) Controller Variables a ...

javascripthtmlangularjs

Looking for guidance on sending data from a JS file to HTML using Nodejs? Seeking advice on various modules to achieve this task effectively? Let's

Looking for advice on the most effective method to transfer data from a JS file (retrieved from an sqlite db) to an HTML file in order to showcase it in a searchable table. My platform of choice is NodeJS. As a beginner, I am willing to put in extra time a ...

javascripthtmlnode.jssqliteexpress

What could be causing the misalignment of my select box in Bootstrap framework?

I'm currently trying to replicate the layout of the second image shown below, as seen in the first image. However, I'm facing an issue with the positioning of the selection box and I can't seem to figure out why. I've experimented wit ...

htmlcssbootstrap-4

How can I delete a hyperlink on a number from my iPhone or iPad?

Is there a way to prevent certain sets of numbers from being linked, like phone numbers do on iPhones? <h2>Table</h2> <table class="table table-sm table-striped table-hover"> <caption class="sr-only">Search Results</caption> ...

htmlioscss

Attempting to design a form that will trigger a print dialog box displaying all the information entered in the form

I am currently working on developing a form that will allow users to input information such as Name, Age, Gender, Hobbies, Contact details, and Photo in order to create a resume. My goal is to build a simple local HTML-based application that generates a RE ...

javascriptphphtmlformsbootstrap-4

Using pure CSS to style sibling span elements in a unique color

Looking to change the color of a specific span based on the title attribute of another span in a different div. The code below successfully turns text2 red if it has the title of "Red". span[title=Red] ~ span { color: red; } <span title="Red" ...

htmlcss

Sliding out menu using AngularJS

I have been attempting to create a slide out menu without success. My goal is for the text (home,users) to appear when the >> button is clicked. I seem to be stuck and can't figure out what I'm missing. This project also marks my initial ve ...

cssangularjs

What is the reason behind an inline element being able to have an explicit width when floating?

When trying to set the width for an inline element <span> within a table-row containing multiple span elements, I encountered difficulty. However, after adding float: left, I was finally able to adjust the width. What is the reason behind the initia ...

css

The CSS file cannot be found on the live XAMPP server

Here is the current structure of my project: https://i.sstatic.net/foUiy.png I attempted to link my CSS stylesheet by navigating to the project path, then /css, and finally /style.css. This setup works correctly when opening the .html file locally in a b ...

phphtmlcssxampphref

Is it possible to turn off the fallback color for bourbon radial gradients?

Is there a way to prevent the fallback from being applied when using the radial gradient mixin in Bourbon? I've consulted the documentation at , which states that the fallback is optional. However, no matter what I attempt, it seems that the primary ...

csssassmixinsfallbackbourbon