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

What is preventing my accordion from closing completely?

Adjust the dimensions of the canvas without disrupting the existing artwork

CSS: What causes the gap below my border to appear?

An angular component that is functioning properly when connected to a live server, however, it is experiencing issues when trying to run `

What is the best method for efficiently wrapping contents within a div container?

What could be causing my PHP code to not execute properly alongside the HTML?

Change the destination of an iFrame upon user click

Difficulty resizing background image on iPhone

A guide on retrieving the value of input elements using class names in jQuery

Sorting rows dynamically with jQuery Tablesorter

Implementing AJAX notifications in a contact form integrated with PHP, Google reCAPTCHA, and SweetAlert

Utilizing Vue's string-based class binding feature?

The transparent DIV/waiting message may not be displayed in IE10

Utilizing JSP to trigger a servlet upon loading without the use of script

Node.js error: HTML audio file returns 404 on server but plays fine when accessed directly as an HTML file

How can I retrieve the content from an iframe whenever its state is altered using jQuery?

Maximizing Efficiency: Utilizing a Single Panel across Multiple HTML Files with jQueryMobile

How can I modify the TextField's borderBottom style to be 'none' when it is disabled?

Loading indicator for buttons

Don't waste time creating multiple popups for changing content - streamline your process