Three divs on one line inside another div 100% width

NorseMan

Member
I have one main div bar that I want to have three other DIV's inside. This bar is a 100% width. Ok, so inside this main bar i want three more. There are two div's for mail and phone icon. These should be placed all the way to the right and a div that should be all the way to the left. I have tried with display: inline-block; but it doesn't work. Can someone please tell me how to do this? The three divs inside the main div is in different sizes. Two of them are width 42px and height 44px. The one to the logo on left side is width 300 px and height 44px.

Please, help :help:
 
Use flex
Code:
<div class="parent">
    <div class="full-width">1</div>
    <div>2</div>
    <div>3</div>
</div>

Code:
.parent{
    display: flex;
}
.parent .full-width{
    flex-grow: 1;
}

You can read a great guide to flex here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
 
Thank you sooo much Michalio 😊🥰 This has been a thorn in my eye. And now it's working 👌 You made my day. Finally, i can go to sleep😴👍
 
Back
Top