locked
two divs side by side RRS feed

  • 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 

    Tuesday, June 4, 2019 11:06 PM

All replies

  • 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>

    Wednesday, June 5, 2019 12:07 AM
  • 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

    Wednesday, June 5, 2019 12:44 AM
  • 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

    Wednesday, June 5, 2019 3:15 AM