Uninterrupted stream of multi-line div content without any breaks in between

Question

Uninterrupted stream of multi-line div content without any breaks in between

In this scenario, there are three main divs with a width of 100% each, and within each div, there are 3 inner divs with a width of 50%. The current layout is causing a line break after every set of 3 inner elements.

<style type="text/css">
     .inner{
        width: 50%;
        display: inline-block;
     }
     .outer{
        width: 100%;
     }
</style>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>

My goal is to have two inner elements on each row without any line breaks. I attempted using float but haven't been successful. Any suggestions on achieving this desired effect would be greatly appreciated.

html css

Answer 1

Answer №1

Perhaps you are interested in this, so please take a look.

  .inner{
        width: 50%; float:left;
        display: inline-block;
     }
     .outer{
        width: 100%;
     }

<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>

Answer 2

Perhaps you are interested in this, so please take a look.

  .inner{
        width: 50%; float:left;
        display: inline-block;
     }
     .outer{
        width: 100%;
     }

<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>
<div class="outer">
     <div class="inner"> content </div><div class="inner"> content </div><div class="inner"> content </div>
</div>

Answer 3

Answer №2

 .inner{
    width: 33%;
    display: inline-block;
 }
 .outer{
    width: 100%;
 }

To rectify the problem, you can add this CSS code snippet. Occasionally, certain browsers may present issues. The optimal solution would be to set the width at 33.33%, but you can also try slightly lower values like 30% or 32%. Hopefully, this adjustment resolves the issue for you!

Answer 4

 .inner{
    width: 33%;
    display: inline-block;
 }
 .outer{
    width: 100%;
 }

To rectify the problem, you can add this CSS code snippet. Occasionally, certain browsers may present issues. The optimal solution would be to set the width at 33.33%, but you can also try slightly lower values like 30% or 32%. Hopefully, this adjustment resolves the issue for you!

Answer 5

Answer №3

To determine the width of each div, divide 100 by the number of divs you want to display.

For example, if you want to display 2 div's, then 100/2 = 50%. In this case, you would set the class width 50%.

Similarly, for 3 divs: (100/3) = 33.33

So, you would need to set the following CSS:

.inner{
        width: 50%;
        display: inline-block;
        float: left;
     }

Answer 6

To determine the width of each div, divide 100 by the number of divs you want to display.

For example, if you want to display 2 div's, then 100/2 = 50%. In this case, you would set the class width 50%.

Similarly, for 3 divs: (100/3) = 33.33

So, you would need to set the following CSS:

.inner{
        width: 50%;
        display: inline-block;
        float: left;
     }

Answer 7

Answer №4

The issue arises from the inner width being set to 50%, causing a line break as two divs already occupy 100%. If the inner width is adjusted to :33%, it will accommodate three inner divs. To fit more inner divs, divide 100 by n (the number of divs) to determine the appropriate width.

.inner {
  width: 32%;
  display: inline-block;
}

.outer {
  width: 100%;
}

<div class="outer">
  <div class="inner"> content </div>
  <div class="inner"> content </div>
  <div class="inner"> content </div>
</div>
<div class="outer">
  <div class="inner"> content </div>
  <div class="inner"> content </div>
  <div class="inner"> content </div>
</div>
<div class="outer">
  <div class="inner"> content </div>
  <div class="inner"> content </div>
  <div class="inner"> content </div>
</div>

Answer 8

The issue arises from the inner width being set to 50%, causing a line break as two divs already occupy 100%. If the inner width is adjusted to :33%, it will accommodate three inner divs. To fit more inner divs, divide 100 by n (the number of divs) to determine the appropriate width.

.inner {
  width: 32%;
  display: inline-block;
}

.outer {
  width: 100%;
}

<div class="outer">
  <div class="inner"> content </div>
  <div class="inner"> content </div>
  <div class="inner"> content </div>
</div>
<div class="outer">
  <div class="inner"> content </div>
  <div class="inner"> content </div>
  <div class="inner"> content </div>
</div>
<div class="outer">
  <div class="inner"> content </div>
  <div class="inner"> content </div>
  <div class="inner"> content </div>
</div>

Answer 9

Answer №5

To fit 3 divs inline, each div should have a width of 33%. However, to account for a 2px gap between inline-blocks, we set the inner div width to 32%. Make sure the inner div's width is 32% so that all 3 inline-blocks can fit within the parent div's given width. See the code snippet below:

.bigBox
{
    width: 700px;
    height: 500px;
    background: grey;
}

.box{
    width: 32%;
    display: inline-block;
    background: yellow;
}

<body>
<div class="bigBox">
<div class="box">
content1
</div>
<div class="box">
content2
</div>
<div class="box">
content3
</div>
</div>
  </body>

This advice was provided by @Rubenxfd in a previous comment. Hopefully, this explanation helps clarify things :)

Answer 10

To fit 3 divs inline, each div should have a width of 33%. However, to account for a 2px gap between inline-blocks, we set the inner div width to 32%. Make sure the inner div's width is 32% so that all 3 inline-blocks can fit within the parent div's given width. See the code snippet below:

.bigBox
{
    width: 700px;
    height: 500px;
    background: grey;
}

.box{
    width: 32%;
    display: inline-block;
    background: yellow;
}

<body>
<div class="bigBox">
<div class="box">
content1
</div>
<div class="box">
content2
</div>
<div class="box">
content3
</div>
</div>
  </body>

This advice was provided by @Rubenxfd in a previous comment. Hopefully, this explanation helps clarify things :)

Uninterrupted stream of multi-line div content without any breaks in between

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Implementing a feature in React to restrict access to my URL for a specified duration

On mobile devices, the Next.JS application (featuring Chakra UI) does not stretch to full width

Is there a way to automatically submit an upload form once a file has been selected?

The requested resource at http://localhost/Grafica/%7Bd.icon%7D/ was not found (Error 404)

Combine Angular variable in JavaScript function

Ways to modify the background color of the entire body excluding a sidebar div

What is causing the href to not trigger?

Struggling to position search form to the right side of an <li> element

What is the suitable condition necessary for optimal functionality?

The ajax response is returning the entire page's html code instead of just the text content from the editor

The Bootstrap 4 Footer fails to align at the bottom of the page

The issue with the search box not being correctly displayed on Google CSE using Twitter Bootstrap

Is there a way to modify the text color within the thumb-label of the Vuetify v-slider component?

The jquery function is not operating as anticipated

Having trouble making a Bootstrap 4 input-group with beta 3 prepend/append function properly

Angular disrupts the functionality of jQuery slideshow

The HTML Style for implementing HighChart title text does not work when exporting files

Sending Ajax GET request following the first Ajax POST request

CSS - Dynamic triangle separator

vertical alignment problem in dropdown box - compatibility problem with Firefox