Is there a way to align text to the right next to an image using Flexbox?

Currently in the process of working on a project, I've encountered an issue with aligning the text next to the image to the right within flexboxes. Despite setting up the parent and child classes correctly, the text refuses to move to the desired position.

Here's the current appearance

And here's how it's supposed to look like

Provided below is the HTML and CSS code:

.thesis-main-container h1 {
                text-align: center;
                padding: 2rem;
            }

            .thesis-container {
                display: flex;
            }

            .thesis-main {
                justify-content: center;
                align-items: center;
                padding: 2rem;
                flex: 1;
            }

            .thesis-sidebar {
                flex: 0 0 40%;
                display: flex;
                flex: wrap;
            }

            .thesis-sidebar img {
                width: 35%;
                height: auto;
            }

            .img-box {
                width: 300px;
            }

            .img-box img {
                width: 100%;
                flex: 0 0 300px;
            }

            .info-box {
                padding: 1rem;
            }
<div class="thesis-main-container">
              <h1>Thesis Exhibit</h1>
                <div class="thesis-container">
                  <!----Parent class-->

                  <section class="thesis-main">
                    <!----Child class-->
                    <video video controls autoplay loop width=100% src="assests/videos/thesis.mp4"></video>
                    <h2>Reimagine Urban</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum similique impedit iure.</p>
                  </section>

                  <aside class="thesis-sidebar">
                    <!---parent class-->
                    <div class="thesis-child">
                      <div class="img-box">
                        <img src="assests/images/thesis-fisma.jpg" alt="">
                      </div>
                      <div class="info-box">
                        <h3>Fisma: Design and Prototype</h3>
                        <p>Design showcase of new prototype project</p>
                      </div>
                      <div class="thesis-child">
                        <div class="img-box">
                          <img src="assests/images/thesis-fisma.jpg" alt="">
                        </div>
                        <div class="info-box">
                          <h3>Fisma: Design and Prototype</h3>
                          <p>Design showcase of new prototype project</p>
                        </div>
                      </div>
                  </aside>
                  </div>
                </div>
htmlcss

Answer №1

After some investigation, I believe I have found a solution for you. It seems that there was a missing closing div tag in the first thesis-child, which may have been causing some issues. I have made some adjustments by removing display: flex from thesis-sidebar and adding it to thesis-child. Hopefully, this resolves the problem.

.thesis-main-container h1{
    text-align: center;
    padding: 2rem;
}

.thesis-container{
    display: flex;
}

.thesis-main{
    justify-content: center;
    align-items: center;
    padding: 2rem;
    flex:1;
}

.thesis-sidebar{
/*     flex: 0 0 40%; */
/*     display: flex; */
/*     flex:wrap; */
}

.thesis-sidebar img{
    width: 35%;
    height: auto;
}
.img-box{
    width: 300px;
}

.img-box img{
    width:100%;
    flex: 0 0 300px;
}
.info-box{
    padding: 1rem;
}

.thesis-child {
  display: flex;
  align-items: center;
  padding: 15px;
}
<div class="thesis-main-container">
    <h1.>Thesis Exhibt</h1>
    <div class="thesis-container"> <!----Parent class-->

        <section class="thesis-main"> <!----Child class-->
            <video video controls autoplay loop  width=100% src="assests/videos/thesis.mp4"></video>
            <h2>Reimagine Urban</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum similique impedit iure.</p>
        </section>

        <aside class="thesis-sidebar"> <!---parent class-->
            <div class="thesis-child">
                <div class="img-box">
                    <img src="https://dummyimage.com/300" alt="">
                </div>
                <div class="info-box">
                    <h3>Fisma:Design and Prototype</h3>
                    <p>Design showcase of new prototype project</p>
                </div>
            </div>
            <div class="thesis-child">
                <div class="img-box">
                    <img src="https://dummyimage.com/300" alt="">
                </div>
                <div class="info-box">
                    <h3>Fisma:Design and Prototype</h3>
                    <p>Design showcase of new prototype project</p>
                </div>
            </div>
        </aside>
    </div>
</div>

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

What is the best way to create a responsive top bar for mobile devices?

Struggling with an issue while trying to create a top bar. It works perfectly on desktop mode, but the problem arises when viewing it on mobile - it's not responsive. I need help making it responsive. Can anyone fix this for me? This is how my mobile ...

htmlcssbootstrap-4

Variables disappearing after hiding the flash application

In the div, I have a flash file embedded. This div is initially visible with display:block;. There are two other sister divs alongside this one. All three divs are controlled by jQuery tabs, which means when a different tab is clicked, the current visible ...

htmlcssflashdata-loss

How can you create a vertical bar graph using CSS that fills in from the bottom to the top instead of top to bottom?

I have created a bar graph using HTML and CSS. The issue I am facing is that the bar fills up in reverse order - when the height is set to 0%, the bar appears filled at 100%. I attempted changing the CSS property from "top" to "bottom," but it did not reso ...

htmlcssbar-chart

Tips for avoiding the display of the overall scrollbar while utilizing grid with an overflow:

In my react-redux application, I am utilizing the material ui Grid component for layout design. The structure of my code is as follows: <div> <Grid container direction="row" spacing={1}> <Grid item xs={3}> ...

javascriptcssreactjslayoutmaterial-ui

When I try to scroll, the sticky card fails to stay in place as intended with CSS

I'm having trouble creating a sticky card that remains in place when I scroll. https://i.sstatic.net/wPZ6S.png <Box display={'flex'} width={'100%'} height={'150rem'} > <Box width={'100%'}> {f ...

cssmaterial-uiflexbox

Unable to establish proper functionality of username variables in Node.js chat application

For my latest project, I am developing a chat application in node.js following a tutorial from socket.io. The main objective of the app is to allow users to input their username along with a message, which will then be displayed as "username: message" in t ...

javascriptjqueryhtmlnode.js

Troubles with implementing child routes in Angular 6

I'm having trouble getting the routing and child routing to work in my simple navigation for an angular 6 app. I've configured everything correctly, but it just doesn't seem to be working. Here is the structure of my app: └───src ...

angularhtmltypescriptangular-routing

How to perfectly position various height <a> elements in a WordPress mega menu

I'm currently working on a WordPress mega menu with four columns, each with a heading or top menu item. The headings should have a gradient border at the bottom and differ in length. However, I'm facing an issue where some headings span two lines ...

htmlcsswordpress

Is there a way to insert animated images in front of every navigation menu item?

I have successfully implemented the HTML and CSS for my navigation menu items, but now I'm facing an issue trying to incorporate unique images right before each menu item in WordPress. Due to the hover animation on the menu names, I couldn't get ...

phphtmlwordpressmenunavigation

Why do the layout columns become empty when floated DIV's are combined with selects?

Upon reviewing the code below, I noticed that when all the SELECT elements are removed from the HTML, the alignment of the DIV containing SELECT 4 is corrected and stacked properly without any skipped columns. This raises the question - Could there be defa ...

csshtmldrop-down-menucss-float

The AJAX form is having issues with displaying success or error messages

I've posed this question in the past, but I am still unable to find a solution. Despite making some adjustments, I have not been successful. The form itself functions properly; however, it should display an error or success message when the user attem ...

javascriptphpjqueryhtmlajax

Updating the value of each preceding sibling of every checked checkbox using jQuery upon form submission

After extensive research, I discovered that the most effective approach involves using a clever workaround to capture every tick and untick on a dynamic input row with multiple checkbox arrays. However, none of the solutions provided a viable method. I th ...

javascripthtmljquerycheckbox

HTML overlooked following the iframe

Currently facing an issue that bears a resemblance to this particular problem upon first glance. However, the solution provided for that problem did not resolve the issue in my situation. Within a tagx, I have an iframe where I am dynamically setting the ...

jqueryhtmlspringiframejstl

Issues with the CSS property clear:both causing a significant gap

Coding in HTML <div id="site-content"> <div class="site-content"> <div id="site-content-left"> <h1>NEW COURSE OFFERINGS</h1> <div id="site-conten ...

htmlcsscss-float

Sending data through forms

I'm having trouble storing values input through a dropdown menu in variables event1 and event2, despite trying global declarations. How can I successfully store a value to both variables and pass it to the JavaScript code? Thank you. <!DOCTYPE HT ...

javascripthtmlcssforms

Utilize HTML code within a .php file without it being parsed

When I include HTML code in my PHP file, the HTML code doesn't get interpreted and just appears as text in the browser. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title>Document</title> ...

phphtml

Using jQuery to find the index of an element with a particular child

I am working with three different div containers. <div class="box"></div> <div class="box"> <span class="item">my item</span> </div> <div class="box"></div> Within these containers, there is an item pla ...

javascriptjqueryhtml

dynamic display carousel

Utilizing technology Bootstrap CSS JS Django Python The Issue at Hand I am facing a challenge with declaring the container-fluid and ensuring that the carousel slide occupies the entire screen. However, I have noticed that there is some space remaining ...

javascripthtmlcssbootstrap-4

I aim to display an image with fixed dimensions, unaffected by varying screen resolutions

When monitor resolutions are altered, images may appear in varying sizes even if they are coded with metric values such as cm or mm. Is there a way to maintain the exact size of images displayed on monitors? ...

htmlcssimagesize

Reduce multiple paragraphs in PHP to a more concise form

Is there a way to trim paragraph content to 100 characters, especially when dealing with multiple paragraphs? For example, consider the following HTML snippet: <div class="div-1"> <div class="section-1"> <p>"Lorem ipsum ...

phphtmlcss