CODEWITHSUNDEEP
htmlcss
Thinker
Thinker

Reputation: 5366

CSS arrange two divs next to each other

I have following HTML:

<div className={`page-header-profile-photo-container`}>
    <div className="user-picture">
    </div>
    <div className="user-name">
       <p>Sample GmbhH</p>
    </div>
</div>

And my css:

  .page-header-profile-photo-container{
    position: absolute;
    top: 10%;
    right: 130px;
    width: 200px;

  }
  .user-picture {
    position: relative;
    top: 10%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #787567;
  }
  .user-name{
    position: absolute;
    top: 5%;

  }

This renders like following:

enter image description here

I want to have some space between circular div and text. page-header-profile-photo-container's position has to be absolute.

How can I fix this?

Upvotes: 0

Views: 64

Answers (3)

Bhuwan
Bhuwan

Reputation: 16855

First of all correct your syntax like className to class and try the following code. No need to position:absolute in user-name class

  .page-header-profile-photo-container{
    width: 200px;
    position: absolute;
    top: 10%;
    right: 130px;

  }
  .user-picture {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #787567;
    display: inline-block;
    vertical-align: middle;
  }
  .user-name{
    display: inline-block;
    vertical-align: middle;
  }
<div class=page-header-profile-photo-container>
    <div class="user-picture">
    </div>
    <div class="user-name">
       <p>Sample GmbhH</p>
    </div>
</div>

Upvotes: 2

Rahul
Rahul

Reputation: 2071

Using flex-box it will work good for me. Hope this help.

.page-header-profile-photo-container{
  background-color: #f5f5f5;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
    position: absolute;
    height: 50px;
    top: 10%;
    right: 130px;
    padding: 5px 10px;
    width: 200px;

  }
  .user-picture {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /*background-color: #787567;*/
  }
  .user-picture img{
    border-radius: 50%;
    display: block;
    height: auto;
    max-width: 100%;
  }
  .user-name{
    font-size: 15px;
  }
<div class=page-header-profile-photo-container>
    <div class="user-picture">
      <img src="http://placehold.it/40x40" alt="Profile Picture" />
    </div>
    <div class="user-name">
       <p>Sample GmbhH</p>
    </div>
</div>

Upvotes: 0

Ferit
Ferit

Reputation: 9727

Don't use absolute positioning in user name. Absolute positioning puts an item in a particular position no matter what (doesn't care if it gets overlapped)

Upvotes: 0

Related Questions