Tips for increasing the flexibility of div movement, even when they are centered on the webpage

I have positioned three divs in the center of the webpage, but I am looking to move them further down without relying on margin or padding. My goal is to create more space above the divs so that I can place an image above them. Is it possible to achieve this using flexbox, which I am currently utilizing?

Here is the HTML file:


    <main>
    <div class="who">
        <h1><img class ="who-we" src="https://dsprme.org/lib/images/who.png?222"></h1>
        <h2>Who We Are</h2>
        <p class="who-info">DSPR is an ecumenical and Church – related organization which is an integral part of the
        Middle East Council of Churches (MECC).
        It was founded following the 1950 Arab Israeli War and the creation of the Palestine refugee
        problem.
        </p>
        <a class = "Read-more" href="dspr.html">Read More</a>
    </div>
    <div class="what">
        <h1><img class ="work" src="https://dsprme.org/lib/images/what.png?222"></h1>
        <h2>What We Do</h2>
        <p class="what-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat</p>
        <a class = "Read-more" href="dspr.html">Read More</a>
    </div>

    <div class="where">
        <h1><img class="jordan" src="https://dsprme.org/lib/images/where.png?222"></h1>
        <h2>Where We Work</h2>
        <p class="where-info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco labori</p>
        <a class = "Read-more" href="dspr.html">Read More</a>
    </div>
    </main>

    <script src="script.js"></script>
    </body>
    </html>
    

And here is the CSS file:

*{
        padding:0;
        margin: 0;
        box-sizing: border-box;
    }

    body{
        font-family: 'Calibri';
        color: #222;
        padding-bottom: 50px;
    }

    header{
        height:100px;
        display:flex;
        justify-content: space-around;
        align-items: center;
    }

    ul{
        display:flex;
        list-style-type:none;
        align-items: center;
        justify-content: center;
    }

    ul li a{
        color: rgb(0,0,0);
        text-decoration: none;
        padding:7px 15px;
        transition: all 0.3s ease-in-out;
        font-size: 17px;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        position: relative;
        display:inline-block;
    }

    li a:hover::before, li a:hover::after{
        width:100%;
        left:0;
    }

    li a::before{
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        width: 0%;
        height: 2px;
        background: #FCAE1E;
        transition: all 250ms ease-in-out;
    }
    li a::after{
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0%;
        height: 2px;
        background: #FCAE1E;
        transition: all 250ms ease-in-out;
    }

    main{
        display: flex;
        height:calc(100vh - 100px);
        align-items: center;
        justify-content: space-around;
    }


    .who{
        display: flex;
        flex-direction: column;
    }
    .what{
        display: flex;
        flex-direction: column;
    }
    .where{ 
        display: flex;
        flex-direction: column;
    }

    .who-we{
        width: 100px;
        height: 100px;
    }

    .work{
        width: 100px;
        height: 100px;
    }

    .jordan{
        width: 100px;
        height: 100px;
    }

    .who-info{
        width: 300px;
        font-size: 15px;
    }

    .Read-more{
        display: flex;
        justify-content: flex-end;
        margin-top: 10px;
    }

    .what-info{
        width: 300px;
        font-size: 15px;
    }
    .where-info{
        width: 300px;
        font-size: 15px;
    }
    

Here is the image

Answer №1

In my opinion, it might simplify things to add two more sections to contain the image and the remaining three sections separately.

[Is this the layout you had in mind? You can always rearrange the image later][1]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

Refresh your textarea content using the replace method in jQuery

My goal is to extract and manipulate specific values within a user-entered code using jQuery. The code includes custom tags called setting, which I want to extract and display in input fields for easy editing. I have successfully retrieved and displayed th ...

How can I showcase an image using Angular?

Recently, I've started working with Angular and I'm trying to display images using assets. I have a service that looks like this: const IMAGES = [ {"id":1, "category": "boats", "caption": "View from the boat", "url":"assets/img/boat_01.jpeg"}, ...

What is the best method for implementing a dropdownlist submenu in yii2?

I am facing an issue with the yii2 field class dropdownlist submenu. Can someone guide me on how to create a submenu or subselect list in a dropdownlist? https://i.sstatic.net/Arz6O.jpghttps://i.sstatic.net/jqXIh.jpg Here is my database schema: +-------- ...

Strategies for creating a clickable dropdown menu

I am currently developing a website that requires 15 HTML files. I have created a navbar with 3 direct links nav-items and 2 dropdowns. How can I make the dropdown menu appear on hover instead of click, and navigate to the dropdown href link when clicked? ...

Tips for maintaining an open side menu

I'm having trouble keeping the side menu open when a user clicks on one of the child menu items. Ideally, I want section 1 to display section 2 content when hovered over, and keep both sections open even when section 2 is clicked. The only time they s ...

jquery allows you to toggle the visibility of content

There are two divs with a button positioned above them. Initially, only one div, the catalogusOrderBox, is visible. When the button named manualButton is clicked, it should display the manualOrderBox div while hiding the catalogusOrderBox div. The text on ...

What is the best way to delete a container when its child element includes a specific string?

I run a website that compiles video clips from various sources, including YouTube. Occasionally, some clips appear as private videos. I am looking to use jQuery to apply the display:none; property to the entire div when the class a.colorbox.cboxElement con ...

Change the CSS menu item to directly load the website instead of using javascript to replace a placeholder

I have a CSS navigation menu, but I'm facing an issue. When I click on a link in the menu, like Google for example, it only changes the name of the placeholder and doesn't actually load the page. Any suggestions on how to fix this? Thank you for ...

The jQuery script is functioning flawlessly in one specific direction

Currently, I am utilizing a basic script to alter the color of elements based on the div being hovered over. While this works smoothly in one direction down the line, when trying to reverse order and backtrack, the colors do not function as intended. The ...

Send Selected Input From Radio Button To Form Using a Function

Within the main php page titled tipComp.php, there is a script designed to submit a selected value from a radio button within a form: <script> $('input[type=radio]').on('change', function() { $(this).closest("form& ...

Showing JSON arrays within innerHTML

One of my peers provided me with an array, and my task is to present it in an HTML format. Even after consulting various resources and examples, I am unable to display the required values. This is my first attempt at such a task, so any guidance would be ...

Run a script on an ajax requested page prior to the page being loaded

My website navigation utilizes AJAX for seamless transitions between pages. Specifically, I have two pages: index.html and profile.html. The structure of both pages is as follows: <html> <head> <script src="script1.js" type="text/javascript ...

Unresponsive CssClass in Asp.net Webpage

Incorporating a MasterPage into my website structure, I've added various tabs in the header section of the MasterPage using the following C# code: <ul id="tabMenu"> <li><asp:HyperLink ID="homeLink" runat="server" o ...

Exploring the Differences: innerHTML versus appendChild for Loading Scripts

Struggling to dynamically load scripts onto the DOM? function addScript(fileName) { document.body.innerHTML += `<script src='components/${fileName}/${fileName}.js'></script>` } addScript('message-interface') I prefer th ...

Exploring the art of div transitions and animations using React and Tailwind CSS

I successfully implemented the sidebar to appear upon clicking the hamburger icon with a transition. However, I am now facing the challenge of triggering the transition when the close button is clicked instead. I have attempted using conditional operations ...

What could be the reason for the lack of response from the jquery element on an

Recently, I've been working on a jQuery project with sticky headers. However, when I tested it on my iPad, I noticed a slight delay and the header jumping around the page. I'm wondering if this issue can be resolved within the code itself or if ...

Variable Returned by AJAX

I am attempting to send a variable using a select box via POST method, then use AJAX to submit the data and finally leverage that variable on the original page to update SQL queries. Below is the code snippet I currently have: <script type="text/j ...

The WP archive.php template is malfunctioning

Having an issue with my website Whenever I try to view the monthly archive () the design appears flipped upside down. I initially assumed that if the archive.php file was missing, WordPress would default to using index.php for the archive page. So why is ...

What is the best way to boost a number using an input value?

I am looking to dynamically increase the number in the span tag based on the number of characters entered in the input field. Each character entered should equate to 5. While my current setup is somewhat functional, there are some minor issues. $(functi ...