two divs side by side

Question

User1324715958 posted

not sure what im doing wrong here:

css:

#div-profile-avatar {
    width: 35%;
    float: left; 
    vertical-align: top;
}

#div-profile-user {
    width: 60%;
    vertical-align: top;
}

html:

<div id="div-profile-avatar">
    <img src="~/Content/Images/Default_Avatar.png" height="150" width="150">
</div>
<div id="div-profile-user">
    Email:
    <br />
    Join Date:
    <br />
    First Name:
    <br />
    Last Name:
    <br />
    Handle:
    <br />
    WBG Coins:
    <br />
</div>

I have event tried putting them inside another div as a container 

Answer 1

User1324715958 posted

Tried using css grid as well:

.container {
    display: grid;
    grid-template-columns: 35% 60% auto;
}

.item1 {
    grid-column: 1;
}

.item2 {
    grid-column: 2;
}

.item3 {
    grid-column: 3;
}

#div-profile-avatar {
    width: 35%;
    float: left;
    vertical-align: top;
}

#div-profile-user {
    width: 60%;
    vertical-align: top;
}

<div class="container">
    <div class="item1">
        <img src="~/Content/Images/Default_Avatar.png" height="150" width="150">
    </div>
    <div class="item2">
        Email:
        <br />
        Join Date:
        <br />
        First Name:
        <br />
        Last Name:
        <br />
        Handle:
        <br />
        WBG Coins:
        <br />
    </div>
    <div class="item3"></div>
</div>

Answer 2

User2103319870 posted

Your code is working as expected when I tried . If these divs are inside any container controls like div or table make sure you enough width is provided so that divs appear side by side

Answer 3

User839733648 posted

Hi UOKSoftware,

I've tried your code on my side and I think it works well.

To see the result directly, I've added borders to the divs.

You could see that the divs is side by side successfully.

        div {
           border-style: solid;
        }

Here is the result.

Best Regards,

Jenifer