0

I have a certain scenario like follows:

You have three inline-elements, two are the same essentially, but the one in the middle is not and its width will always be unknown.

You want either two things:

  • All three elements are inline on the same row
  • If the width is two small, all three elements are stacked on top of each other

With display: inline-element, it will collapse as needed, meaning at a certain width two elements will be on top while one is on bottom. This isn't any of the desired conditions.

    .div-a {
      background-color: red;
    }
    
    .div-b {
      background-color: blue;
    }
    
    div {
      display: inline-block;
      font-size: 4em;
    }
    <div class="div-a">
     L
    </div>
    <div class="div-b">
     Mid
    </div>
    <div class="div-a">
     R
    </div>

How can we make sure that either all blocks are stacked, or they are all inline? Remember the middle element will always be unknown width.

EDIT: Don't know why this was marked as duplicate, as I didn't even ask about media query resizing, that's just one of the solutions.

Andre
  • 778
  • 1
  • 5
  • 23
  • Please post your code here and don't link to an external site. – cloned Aug 29 '19 at 06:27
  • @cloned I'll edit it, thank you for letting me know that. – Andre Aug 29 '19 at 06:27
  • you sure youve added the code in jsfiddle? – tanvi korgaonkar Aug 29 '19 at 06:31
  • @tanvikorgaonkar Link was broken, fixed now :) – Andre Aug 29 '19 at 06:33
  • @Bug I'm not sure if this is possible with css only, do you want a pure css option or are you willing to use javascript? – Jeremy Aug 29 '19 at 06:35
  • @Bug What is the desired result? Right now your divs are inline. When the width of mid div increase all div stacked on each other. – Saif chaudhry Aug 29 '19 at 06:36
  • The only way I can see this working with css only is by using media querys. This means that you need to give a set screen width were the blocks have to stack under eachtother. Example: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_three_columns_responsive – Jeremy Aug 29 '19 at 06:37
  • @Saifchaudhry The desired result is if the width of the page itself is reduced, there should be 0 points at which there is two elements on top, and one on the bottom row. In other words, either a 3x1 or 1x3, no inbetween. – Andre Aug 29 '19 at 06:37
  • @Bug there is no apparent CSS only solution. You may have to use JS. If you know what the exact viewport at the which the element wrap is then you can use media queries. – Faisal Rashid Aug 29 '19 at 06:38
  • @Jeremy I was hoping that wasn't the case because media queries aren't designed to work with parent div width, only device width/type. If I can't do this in CSS then it looks like JavaScript is my only option. – Andre Aug 29 '19 at 06:39
  • you accepted an answer saying *This is probably the best solution there is going to be for this scenario for now so I'm marking it as the solution* --> and that answer is a simple copy of an answer from the duplicate. The answer was deleted and the question closed as duplicate since you explicitely said it solves your issue. – Temani Afif Aug 29 '19 at 12:58

2 Answers2

0

it depends on your viewport and elements width. as you put display inline element in div all div will be treated as an inline element. until you apply any new display property in any specific div. to make sure it comes to stacked, you can use display flax property.

Please read this article. Hope it will help you. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Piyush Ranjan
  • 51
  • 5
-1

use display flex to stay in one row and manage dynamically width middle element 

<div class="a">
<div class="div-a">
L
</div>
<div class="div-b">
Midghghghghchcghgdc
</div>
<div class="div-a">
 R
</div>
</div>

css

    .a {
  display:flex;
}
.div-a {
  background-color: red;
}

.div-b {
  background-color: blue;
}

div {
  display: inline-block;
  font-size: 2em;
}
Akashdeep Singh
  • 23
  • 4