Three divs on one line inside another div 100% width

Questions and tutorials related to Cascading Style Sheets *all versions*

Moderators: gesf, Michalio

Post Reply
User avatar
NorseMan
php-forum Active User
php-forum Active User
Posts: 44
Joined: Mon Jul 04, 2022 5:25 pm
Location: Near Oslo (Norway)

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:
________________
Leon (Norway)
________________

-------
(some of)My configuration is:
Laragon full 5.0 web server with PHP and MySQL installation
(Apache 2.4.47 / PHP 7.4.19 / MySQL 5.7.33)
-------
My toolbox and workbench:
Navicat for MySQL 16.0.13
FileZilla 3.57.1
Among others
-------
Development toolbox:
Adobe DreamWeaver 21.2
Adobe Photoshop 23.1.0
Adobe Illustrator 26.0.2
Adobe InDesign 17.0.1
Adobe XD
Visual Studio Code 1.63.2 (with some extensions enabled)
User avatar
Michalio
Moderator
Moderator
Posts: 209
Joined: Sun Jul 18, 2021 1:33 pm
Location: Poland

Use flex

Code: Select all

<div class="parent">
    <div class="full-width">1</div>
    <div>2</div>
    <div>3</div>
</div>

Code: Select all

.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/
Free coding lessons: https://php-forum.com/phpforum/viewtopic.php?t=29852
User avatar
NorseMan
php-forum Active User
php-forum Active User
Posts: 44
Joined: Mon Jul 04, 2022 5:25 pm
Location: Near Oslo (Norway)

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πŸ˜΄πŸ‘
________________
Leon (Norway)
________________

-------
(some of)My configuration is:
Laragon full 5.0 web server with PHP and MySQL installation
(Apache 2.4.47 / PHP 7.4.19 / MySQL 5.7.33)
-------
My toolbox and workbench:
Navicat for MySQL 16.0.13
FileZilla 3.57.1
Among others
-------
Development toolbox:
Adobe DreamWeaver 21.2
Adobe Photoshop 23.1.0
Adobe Illustrator 26.0.2
Adobe InDesign 17.0.1
Adobe XD
Visual Studio Code 1.63.2 (with some extensions enabled)
Post Reply