0

I would like to align three DIVs side by side in their parent DIV, but if total width of the three DIVs exceeds the width of the parent, I would instead like each of the three DIVs to display one on top of the other. Each of the three DIVs have variable width content and it doesn't make sense to try to fix the width of those DIVs. I've been generally using display:inline-block but that doesn't help when the parent width can fit two of three DIVs.

<div class="parent">
 <div class="a">aaa</div>
 <div class="b">bbb</div>
 <div class="c">ccc</div>
</div>

If the parent DIV is wide enough, I'd like to see them as:

AAA BBB CCC

and if it is not wide enough, I'd like to see them as:

AAA
BBB
CCC

What I'm actually seeing as the parent gets more narrow (or children get wider) is:

AAA BBB
CCC

Is there any CSS only solution?

EDIT: I've been asked what I am trying accomplish specifically. Basically, I have a set of search results that spans multiple pages. The page navigation is set up as a First\page number\Last type setup, so it could look like: First 1 2 3 Last or First 12 13 14 15 16 Last depending on the number of results. I guess I could just always have it stack on smaller devices to prevent an awkward wrap, but I like it in-line better from a visual perspective when there is the room to do so.

redstang423
  • 123
  • 1
  • 1
  • 10

1 Answers1

0

So there are a few things you can do to accomplish this in css.

You could use flexbox. But I am not sure this is exactly what you are looking for
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
This will allow you accomplish some dynamic width content.

If this is not what you are looking for then using a media query will help provide the solution. As stated in the comment, there is no way to do this programmatically with css and have it be dynamic and know all about the content. But if you have a specified min page width, and you know the width per object, then media query is your best bet as you can calculate the widths required and determine when the break should happen.

div.parent > div {
    display: inline-block;
}
@media only screen 
  and (min-device-width: 320px) {
    div.parent > div {
        display: block;
    }
}

This would cause the child div's to stack at a screen size less than 320px wide;

This site, as mentioned above for the flexbox, has a bunch on media queries as well.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

ctatro85
  • 311
  • 3
  • 11
  • Thanks for your suggestions. I will check out flexbox to see if it can help. I do already use media queries in the responsive design of the page, and I can implement your suggested formatting as a backup if I can't find anything else. I'm trying to avoid stacking whenever I can simply from a visual perspective. I edited the end of my post to more clearly explain my scenario. – redstang423 Mar 25 '19 at 23:00
  • An alternative is to hide the outer numbers if you are doing like a pagination type of thing based on device width. You can also manipulate other children based on how many siblings an element has. But this would require you to know the width of the parent and how many children fit at particular widths. https://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has – ctatro85 Mar 26 '19 at 19:01