html – Place div with one element next to div with many elements and when resizing window put element one under another-ThrowExceptions

Exception or error:

I have following situation (look for the image below)
Image 1

I want the button which is alone to be on the left, rest of the buttons (which are inside
their own div) to be on the left. when i will resize (making window smaller) I want to achieve
what is in the first resizing (one button goes down), and then on the second resizing two buttons below
and then 4 buttons in column at the end.

I have thought about something like this in css file:

.aaa {
    text-align: left;
    float: left;
}
.bbb {
    float: left;
}

.ccc {
    float: left;
}

but after first resizing only button with className=”bbb” stays in this row,
and Button1,2 and 3 goes below the first one, so its like:
enter image description here

How to solve:

You could try to use display: flex, but it won’t result in exactly what you want.

See below example:

.aaa {
  display: flex;
  width: 100%;
}

.bbb {
  flex: 0;
}



.ccc {
  display: inline-block;
  flex: 1;
}
<div class="aaa">
  <button class="bbb">Button</button>
  <div class="ccc">
    <button>Button 1</button>
    <button>Button 2</button>
    <button>Button 3</button>
  </div>
</div>

###

Actually I did something like this (and this is just enough for me):

.aaa {
    text-align: left;
    overflow: hidden;
    width: 100%;
}

.bbb {
    float: left;
}

So completely ignoring the “ccc” class.

Leave a Reply

Your email address will not be published. Required fields are marked *