Can you try this code. Is this what you are looking for?
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<div><i class="fab fa-amazon"></i></div>
<div><i class="fas fa-window-minimize"></i></div>
<div><i class="far fa-window-maximize"></i></div>
<div><i class="fas fa-window-close"></i></div>
Here is the code, hope that help to solve your problem. Link to codepen: https://codepen.io/mesapkota/pen/GRmqvpJ
I trying to build a container element with many child elements. I want to have implemented in such a way that some elements can be left aligned some elements can be right aligned. And even a complex scenario like the child elements can be also a container the rule follows there as well. The elements cannot have a fixed size. It should automatically size.
If explain it by a simple example. A window title bar
Title bar is a container
It can have title, application icon, and control box
This control box itself is a container where it holds close, maximize and minimize buttons.
I want application icon to be left aligned.
Control box should be right aligned
The remaining space should be used by title
If I want to accommodate tabs the tab panel becomes another container with tabs as children. It should be placed between application icon and title.
I guess I’m clear enough. What’s the best way to achieve this.
What I’ve tried.
- I tried with ‘block’ with float right and left but not flexible
- Tried flex with margin left and right auto.
Still I’m not able to achieve what I need.
I’m sure it’s possible with css. But I’m no expert. Please help
Please provide the HTML and CSS you’ve attempted. It could be you’re close and having people create stuff from whole cloth which may or may not meet your needs, as the existing answer does, seems a waste of time, if you know the structures you need.