The inline-block display property is not functioning as expected

.test,
.test2 {
  display: inline-block;
}
<div class="container">
  <div class="row">

    <div class="test">
      <button type="button" class="btn btn-success">Success</button></div>

    <div class="test2">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
      </span>
    </div>

  </div>
</div>

http://jsfiddle.net/x1hphsvb/6270/

I want to place two divs next to each other on a webpage.

htmlcss

Answer №1

Make sure to include display: flex; in the .row class for this design.

Check out the JSFiddle here!

.test, .test2 {
  display: inline-block;
}
.row {display: flex;}
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
 <div class="row">
 
<div class="test">
<button type="button" class="btn btn-success">Success</button></div>

<div class="test2">
   <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
  </span>
</div>
   
</div>
</div>

To learn more about the display property, visit - W3Schools Display Property Reference

Answer №2

Without a specified max-width or width property on the .test2 div, the width of the second div is automatically set to fit the screen size to accommodate the text. Adding either of these properties to the .test2 class should resolve this issue.

Answer №3

It appears that you are utilizing bootstrap, therefore it is recommended to utilize the bootstrap grid system. By using the col-sm-2 and col-sm-10 classes, I have eliminated the test and test2 classes.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">

    <div class="col-sm-2">
      <button type="button" class="btn btn-success">Success</button></div>

    <div class="col-sm-10">
      <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta odit omnis maiores quis, tempore ut dolorum iure, nesciunt dolores laboriosam cumque praesentium blanditiis porro repellat numquam. Ducimus, dolores atque accusantium!
      </span>
    </div>

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

Is there a tool available that can help me come up with unique names for element locators?

Currently working on a project using Selenium IDE and looking to generate names for element locators. I have the option to use xpaths, CSS, or DOM to identify elements and create names for them. Can anyone provide suggestions on how to extract meaningful n ...

javascriptcssseleniumxpath

What is the best way to crop an image to focus solely on the center portion?

Using Bootstrap 3, how can I display an image cropped in a .col-sm-6 grid column? The image is 720px wide. Typically, with the .img-responsive class, the image will resize proportionally when the display size changes. However, I want to crop the left and ...

csstwitter-bootstrapbootstrap-4twitter-bootstrap-3

Is there a way to exclusively show the browser name and version while excluding any supplementary details with 'HTTP_USER_AGENT'?

I am trying to modify my script to only display the browser version and name using 'HTTP_USER_AGENT'. I want to ensure that my script still covers all modern browsers in case someone helps me and specifies the code only for the Safari browser. C ...

phphtml

Having trouble figuring out how to play an mp3 using the <audio> tag. The console is showing an error message that says, "Unable to decode media resource XYZ."

I've been frustrated while trying to make the HTML5 <audio> element function properly. My webpage has two elements - one serving a file from my server and the other serving the same file from a different source server: <audio preload="metada ...

djangohtmlaudiolocalhosthtml5-audio

Extracting multiple tables from a website using an Android device

It took me a few weeks, but I finally managed to login to a website automatically, download an Excel file, and view the website body. Now, I have another issue that I hope you can assist me with. How can I extract data from every table on the website and ...

androidhtmlweb-scrapinghtml-table

Is the JavaScript click event ineffective for <select> <option>s?

It seems like there's a problem with the code below that is causing it to not work as expected. I'm trying to figure out why the onclick events on the <option>s are not triggering, but everything else seems fine. function displayInput() ...

javascripthtmlcssforms

What could be causing the page to automatically scroll to the bottom upon loading?

My experience with this bootstrap/jquery page in Firefox (v39, latest updates installed) has been unusual as it always seems to jump to the bottom of the page upon clicking. Upon inspecting the code, I couldn't find any JavaScript responsible for thi ...

javascriptjquerycsstwitter-bootstrap

Only the style attribute will support React CSS animations

After developing a component that changes its className based on the state, I discovered that animations only function properly when placed within the "style" attribute. In my Codesandbox project, by uncommenting line 15 in the code snippet provided, the ...

cssreactjs

Is it possible to apply border-radius to selections, similar to how it is done in vscode

It was reminiscent of this... Visual Studio Code ::selection{ border-radius: 5px; } I attempted something similar to this, however it was not successful... ...

css

Creating a choppy movement when switching between content with jQuery

I am experiencing a choppy effect when trying to toggle the content visibility with a button click. Can someone advise if there are any issues in how I have structured the markup? Also, is there a way to achieve a smoother toggle effect? View Code $(do ...

jqueryhtmlbootstrap-4

Selecting objects within a small three.js view

I am able to showcase an entire page filled with graphical elements using three.js and can even select objects by clicking on them. However, when attempting to display three.js graphics in a small viewport within an HTML page, issues arise. In order to ca ...

javascripthtmlthree.jsmouse

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

I have a unique situation where I need to extract and store selected values from two separate drop-down menus generated from arrays. The goal is to pass these selected values in the submit button link. For example, if a user selects "123" for email and "t ...

javascriptphphtmljquery

Is it possible to utilize Angular's structural directives within the innerHtml?

Can I insert HTML code with *ngIf and *ngFor directives using the innerHtml property of a DOM element? I'm confused about how Angular handles rendering, so I'm not sure how to accomplish this. I attempted to use Renderer2, but it didn't wor ...

htmlangulartypescriptinnerhtmlangular-structural-directive

New design in TinyMCE V5: Vertical toolbar labels arranged within a CSS grid layout

When TinyMCE version 5 is placed inside a CSS grid layout, the toolbar labels are displaying vertically. It appears that the "width:auto" property is not being applied correctly, and I am struggling to find a solution to fix it. I would greatly appreciat ...

csstinymce

How to hide bullet points in a list when the links are hidden, utilizing either Jquery or CSS

In my attempt to hide bullet points from a list when links are hidden, the first and second links have been hidden using backend code in C#. I am trying to make sure that the bullets are only displayed if there are actual links present. <div class="l ...

javascriptjquerycss

The submit button on the HTML form is not functioning properly and requires activation

Currently, I am a student focusing on honing my skills by working on an app for a blog post. To kickstart my project, I downloaded the "clean-blog" template from the startbootstrap website. If you are interested, here is the link to the template: My curr ...

htmlcssformsejs

Extract data from HTML table using WebDriverWait and web scraping techniques

My goal is to scrape the names of all companies with 500 or more employees from the website below: I have created a script that scrapes the company names from the first page and then continues to click on the "Next Page" button to scrape more names. These ...

pythonhtmlselenium-webdriverweb-scraping

jQuery Mobile offers a feature that allows users to create collapsible elements

I recently ran a coding validation check at and encountered the following errors: <div data-role="collapsible-set" id="col"> <div data-role="collapsible" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" class="ui-nodisc-icon"> ...

jqueryhtmlcss

The issue with the CSS background gradient is that it fails to completely cover the entire

Despite attempting several solutions recommended in similar questions, I am still unable to resolve the issue. Using the CSS background gradient generator at Ultimate CSS, I found that the gradient only extends halfway down the page on www.ncentertain.com ...

cssbackgroundgradient

Enhance the appearance of the circular heading

Is there anyway to customize the look of this rounded header? I am having trouble setting a white background. Update #1: This is my current header HTML code: Here is how it currently appears: I utilized Bootstrap along with some custom CSS. Update #2: ...

csshtmlcss-shapes