Arranging two divs side by side using CSS:inline-block

Having some trouble getting two divs with a width of 50% each to appear on the same row. If I adjust the width to 49%, they stack in the same row. Any ideas on what might be causing this issue in the code? I'm more interested in understanding the cause rather than just finding a solution.

CSS -

* {
  padding: 0;
  margin: 0;
}
.wrapper {
  width: 100%;
}

.left-c {
  width: 50%;
  background: #3EF00C;
  display: inline-block;
}

.right-c {
  width: 50%;
  background: #2E4E6E;
  display: inline-block;
}

HTML -

<div class="wrapper">
    <div class="left-c">
        <p>LEFT ----- This is going to be some random text placed in a a left container inside the wrapper. I hope this text will suffice the requirement.</p>
    </div>
    <div class="right-c">
        <p>This is going to be some random text placed in a a right container inside the wrapper. I hope this text will suffice the requirement. ----- RIGHT</p>
    </div>
</div>

JS Fiddle - https://jsfiddle.net/no0chhty/1/

Answer №1

This particular issue is a common occurrence when dealing with elements of the inline-block type. Unfortunately, they tend to consider document whitespace, even blank characters. There are several solutions available, but the method I usually prefer involves setting the parent element to font-size: 0 and then adjusting the font size of the inline blocks to the desired value.

For further information on this topic, you can visit: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer №2

Be sure to include float:left; in the "left-c" class

.left-c {
          width: 50%;
          background: #3EF00C;
          display: inline-block;
      float:left;
        }

For a visual representation, take a look at the FIDDLE

Answer №3

Modify the CSS from display: inline-block to display: table-cell for both sections as shown below:

.left-c {
  width: 50%;
  background: #3EF00C;
  display: table-cell;
}

.right-c {
  width: 50%;
  /* 49% works well */
  background: #2E4E6E;
  display: table-cell;
}

Check out the JSFiddle demo

Answer №4

update this stylesheet

* {
  padding: 0;
  margin: 0;
}
   .container {
    width: 100%;
    display:flex
  }

  .left-panel {
    width: 50%;
    background: #3EF00C;
  }

  .right-panel {
    width: 50%;
    background: #2E4E6E;
  }

Answer №5

hey there! Instead of using inline block, you can opt for float or flex like shown below: visit this link to see the code

CSS

.left-c {
  background: #3ef00c none repeat scroll 0 0;
  float: left;
  width: 50%;
}

Answer №6

<div class="wrapper">
    <div class="left-c"><p></p></div><!----><div class="right-c"><p></p></div>
</div>

By inserting a comment between the closing tag of left-c and the opening tag of right-c, the issue can be resolved.

See example here

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

What is the process for activating the Placeholder feature in a Floating Input Field in a React application

Having trouble changing the placeholder value in a Bootstrap-based floating input. I want to display default text as a placeholder and allow users to edit it. Any suggestions? Check out this example on CodeSandbox <div class="form-floating mb-3&qu ...

Tips for eliminating unwanted white space underneath your webpage while zooming on a mobile device

Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Belo ...

Rows that have been removed from an HTML table remain within the ReactDOM

After diving into JavaScript three months ago, I recently began learning React.js just two days back. While creating a simple TODO app, I noticed that when deleting a row, it disappears from the DOM but not from the React DOM. Can anyone shed some light ...

Align text in the middle of an image

I need some help with formatting my web page. I want to move the content of the red rectangle into the green rectangle, like in the image below: https://i.stack.imgur.com/sAved.jpg The goal is to center the text with the picture. I've tried using di ...

Unexpected results with mix-blend-mode difference

I am struggling with making a black text element overlap a black div while ensuring that the overlapping part of the text appears white. I attempted to use the mix-blend-mode property, but it does not seem to be working as expected. Why is this happening? ...

Is there a way to display (PHP for loop variables) within an HTML table using echo?

for ($q = 1 ; $q < 7 ; $q++ ) { echo $q ; echo $row; } While the above code functions properly, I am interested in echoing two rows as shown in the image below: https://i.stack.imgur.com/7KmUY.jpg I prefer not to use another for loop. Is there a way t ...

What is causing the parse error in my CSS code?

Running into a parse error on line 314 of my css (style.css). The error is "} expected css(css-rcurlyexpected)". Even after adding the necessary curly brace, it still doesn't validate. Below is my CSS starting from line 314 till the end: /* CSS code ...

Arranging items in a vertical column using Bootstrap styling

I am facing a particular issue: The initial design is displayed in Picture 1: I am using Bootstrap 5 as my CSS framework. I attempted to utilize the pre-built columns feature, but so far, I have not been able to find a solution and am currently strugglin ...

Tips for displaying dynamic images using the combination of the base URL and file name in an *ngFor loop

I have a base URL which is http://www.example.com, and the file names are coming from an API stored in the dataSource array as shown below: [ { "bid": "2", "bnam": "ChickenChilli", "adds": "nsnnsnw, nnsnsnsn", "pdap": " ...

The alignment of the JQuery Mobile tabs is off

As I work on developing a Cordova app, I've noticed that the tabs on my Android phone display in an unusual way. Here's what they look like: The image above was created in JSFiddle using JQuery 2.1.0 and JQM 1.4.2 selected with the following co ...

In jQuery, a dropdown selection can be filled with multiple textboxes sharing the same class

I'm experimenting with the idea of using multiple textboxes with the same class filled with different dropdown options that also have the same class. However, I am encountering some issues. When I click on a dropdown option, it changes the value in a ...

How to enable the Copy to Clipboard feature for multiple buttons and transition from using an ID to a class identifier

Can someone please assist me? I have a copy to clipboard function that works well for IDs and a single button on my website. However, I need to modify it to work for multiple buttons and values with a class identifier. Unfortunately, I am unsure how to mak ...

Creating a div that becomes fixed at the top of the page after scrolling down a certain distance is a great way to improve user experience on a

I am struggling to create a fixed navigation bar that sticks to the top of the page after scrolling 500px, but without using position: fixed. Despite trying various solutions, none seem to work due to the unique layout of my navigation bar. Strangely enoug ...

node index of data that has been posted

My HTML file is quite straightforward: <form method="post" action="http://localhost:3000/post"> <input name="name" type="text"/><br /> <input name="last_name" type="text"/><br /> <button id="submit" type="submit"& ...

iOS 10's autofocus feature experiencing difficulties in focusing on input

While using an application on my desktop or Android device, I have noticed that the input focus works perfectly fine. However, when I try to run the same application on iOS 10 Safari, the input focus does not seem to be working. It is worth noting that I ...

What is the best way to insert images into a div in Ionic framework?

I am facing an issue with fitting an image inside a div container. Here is my code structure: <div style="background-color: red; height: 200px; width: 200px;"> <ion-img src="{{kategori[i].img}}"></ion-img> & ...

JavaScript functioning in Firefox but not Chrome

Here is the code snippet in question: $('#ad img').each(function(){ if($(this).width() > 125){ $(this).height('auto'); $(this).width(125); } }); While this code works correctly in Firefox, it seems to have i ...

What is the best way to delete the text following the last "/" in location.href with the help of

I need to extract #step_4#step_4#step_4 from the local project URL The link is https://localhost/test-project/#step_4#step_4#step_4, and I aim to achieve this using window.location.href. This is the code snippet I have implemented: var url_id = window.lo ...

The AppBar is consuming space and obstructing other elements on the

As I dive into React/Material-UI and learn the ropes of CSS, I've come across a challenge with my simple page layout featuring an AppBar. Unfortunately, this AppBar is overlapping the elements that should be positioned below it. In my quest for a sol ...

`Turn a photo into a circular shape by cropping it`

Even though I know that the solution involves using border-radius: 50%, it doesn't seem to be working for my situation. In my code using React/JSX notation, this is how the icon is displayed: <i style={{ borderRadius: '50%' }} className= ...