CODEWITHSUNDEEP
htmlcss
Baptiste Arnaud
Baptiste Arnaud

Reputation: 2750

div position in an another div

i'm desperatly trying to understand how divs work in HTML. here is 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>

and here is my stylesheet related to this part of HTML :

#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;
}

Can you explain to me how the hell can it be displayed like this :

capture

I want my green divs to be centered

And also, if i resize my window it looks like this:

enter image description here

I just want the green divs to stay in the red one ...

Any thoughts ?

Upvotes: 0

Views: 57

Answers (2)

litel
litel

Reputation: 3980

If you want it to be vertically centered, you could use flexbox and make #user_p a flex container with the display: flex; property and give it align-items: center for vertical alignment. Additionally, you can get rid of the inline-block display values of child elements. Also, if you want something that's truly responsive and looks good at different sizes, I'd recommend using media queries and adjusting the flex-direction value to column on smaller screens and row on bigger ones, and playing around with other flexbox properties.

#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;
}

Upvotes: 1

Все Едно
Все Едно

Reputation: 726

this my first answer ever so i hope it will help you this is how i changed the style sheet so it will serve your purpose

        #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 thing, your main div should be set to display:inline-block; , witch basically means it's width will auto adjust as you put elements in to it, and since your green divs are set to display:inline-block; the red div will autoscale automatically in width, so you have to disable it's width property and since it scales to the minimum it can, put padding right to ofset the most right green div of yours

Use media queries? This is what i learned from my HTML experience, if you make the website correctly, even when you scale it to the bear minimum it won't be as pretty as with media queries but everything will be absolutely visible.

Upvotes: 1

Related Questions