arrange a div inside another div

Question

arrange a div inside another div

I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code:

<div id="user_p">
    <img src="img/pp/djbaptou.jpg">
    <div class="followings"> djbaptou </br> Baptiste Arnaud </br> Description: Salut j'aime les carottes lol
        <a href="#">Modifier profil</a>
    </div>
    <div class="followings"> Suivi de: </br> 200 </br> personnes</div>
    <div class="followings"> Suivi par: </br> 300 </br> personnes</div>
</div>

Additionally, here is the corresponding CSS stylesheet:

#user_p{
    background-color: red;
    width: 60%;
    height: 200px;
    margin: auto;
}

#user_p img{
    display: inline-block;
    width: 200px;
    height: 200px;
}

.followings{
    font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
    width: 200px;
    display: inline-block;
    background-color: green;
    margin-left: 60px;
    text-align: center;
}

How can I achieve a display like this?

https://i.stack.imgur.com/vQO3L.jpg

I want to center my green divs.

When resizing the window, it looks like this:

https://i.stack.imgur.com/oYadT.jpg

I just need the green divs to remain within the red one...

Any ideas?

html css

Answer 1

Answer №1

To achieve vertical centering, consider using flexbox by setting #user_p as a flex container with display: flex; and using align-items: center. Remove the inline-block display values of child elements for better alignment. For responsiveness, utilize media queries to adjust the flex-direction value to column on smaller screens and row on larger screens.

#user_p{
    background-color: red;
    width: 60%;
    height: 200px;
    margin: auto;
    display: flex;
    align-items: center;

}

#user_p img{
    width: 200px;
    height: 200px;
}

.followings{
    font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
    width: 200px;
    background-color: green;
    margin-left: 60px;
    text-align: center;
}

Answer 2

To achieve vertical centering, consider using flexbox by setting #user_p as a flex container with display: flex; and using align-items: center. Remove the inline-block display values of child elements for better alignment. For responsiveness, utilize media queries to adjust the flex-direction value to column on smaller screens and row on larger screens.

#user_p{
    background-color: red;
    width: 60%;
    height: 200px;
    margin: auto;
    display: flex;
    align-items: center;

}

#user_p img{
    width: 200px;
    height: 200px;
}

.followings{
    font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
    width: 200px;
    background-color: green;
    margin-left: 60px;
    text-align: center;
}

Answer 3

Answer №2

Here is my very first response, and I truly hope it proves to be helpful for you. This is a breakdown of how I modified the style sheet to align with your specific needs:

        #user_p {
        background-color: red;
        display:inline-block;
        padding-right:100px;
        margin: auto;
    }

        #user_p img {
            display: inline-block;
            width: 200px;
            height: 200px;
        }

    .followings {
        font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
        width: 200px;
        display: inline-block;
        background-color: green;
        margin-left: 60px;
        text-align: center;
    }

First and foremost, ensure that your main div is set to display:inline-block;. This will allow its width to adjust automatically based on the elements within it. Since the green divs are also set to display:inline-block;, the red div will adjust in width accordingly. Make sure to disable the width property for the red div and use padding-right to offset the rightmost green div.

Consider using media queries? Based on my HTML experience, if the website is designed well from the start, even without media queries, it should remain functional when scaled down to the bare minimum. While it may not look as polished as with media queries, everything should still be visible.

Answer 4

Here is my very first response, and I truly hope it proves to be helpful for you. This is a breakdown of how I modified the style sheet to align with your specific needs:

        #user_p {
        background-color: red;
        display:inline-block;
        padding-right:100px;
        margin: auto;
    }

        #user_p img {
            display: inline-block;
            width: 200px;
            height: 200px;
        }

    .followings {
        font-family: "Roboto-Light", Helvetica, Arial, sans-serif;
        width: 200px;
        display: inline-block;
        background-color: green;
        margin-left: 60px;
        text-align: center;
    }

First and foremost, ensure that your main div is set to display:inline-block;. This will allow its width to adjust automatically based on the elements within it. Since the green divs are also set to display:inline-block;, the red div will adjust in width accordingly. Make sure to disable the width property for the red div and use padding-right to offset the rightmost green div.

Consider using media queries? Based on my HTML experience, if the website is designed well from the start, even without media queries, it should remain functional when scaled down to the bare minimum. While it may not look as polished as with media queries, everything should still be visible.

arrange a div inside another div

Answer №1

Answer №2

Similar questions

Retrieve the data file using input text with jQuery

Tips for dynamically retrieving a CSS file for an HTML page

Modifying the Color of Individual Items within the Pagination Component in MUI

Struggling to make the fgetcsv file function seamlessly with my MySQL database

Close the Bootstrap modal upon clicking the "Ok" button in SweetAlert2

Unexpected behavior with first-child selector in a simple CSS code

When a table's row is clicked, it will expand to reveal a secondary table

Chrome causing the vanishing act of floated iframes

What is the best way to disable the click function for <a> tags that have a specific class?

The function send_filer either returns None or finishes execution without encountering a return statement

Alter the typography of the text that has been enhanced by Google

I've encountered a peculiar error that is new to me while using bootstrap and javascript. Can anyone shed light on what this error signifies?

What is the most effective way to transfer a value from the server to a React user interface and incorporate it into the styling of the user interface?

Can you modify a specific column in a table using mat-table in Angular material?

What is the best way to use jQuery to attach functions to every input element?

Tips for incorporating unique images into each individual flex box

Exemplary CSS Text Alignment When Vertical Align is Exceptional

Transformation of looks post a refresh

Tips for ensuring an animation is triggered only after Angular has fully initialized

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?