html/css text is not appearing inside the div

Question

I want to add "this is" text inside this white container as a heading and then a

tag as a short description of the person,

Currently this tag is inside the div but appearing outside, i have no idea why, Can anyone help...!

I am using simple html/css not any framework etc. and this is the css.

@charset "utf-8";

/* CSS Document */

.box {
  height: 160px;
  width: 450px;
  background-color: white;
  margin-left: 10px;
  margin-top: 20px;
  border-radius: 100px;
}

.box img {
  height: 70px;
  width: 70px;
  margin-top: 21px;
  margin-left: 31px;
  margin-right: 349px;
  margin-bottom: 69px;
}





  
  
  Testing Person Card
   

   
    this is

user_17949332 · Answer

You can set your image as a background image. After that, you can center vertically and horizontally your h1 element in the box.

Here is an example:

.box {
  height: 160px;
  width: 450px;
  background-color: white;
  margin-left: 10px;
  margin-top: 20px;
  border-radius: 100px;
  
  /*Background Image Properties*/
  background-image: url('https://apk4all.com/wp-content/uploads/apps/Sagon-Circle-Icon-Pack-Dark-UI/EEbkBvCkmjhYr0xIfkCAEoN3cWVChd6Fh7tC5jfRS06MU0_8mMBwx9yTOHAnO_Hzp40-2.png');
  background-size: 100px;
  background-position: left;
  background-repeat: no-repeat;
  
  /*Center the text in the box*/
  text-align: center;
  
}

h1{
transform: translateY(60px);
}


  
    this is

user_17848908 · Answer

I have Solved Your Question For Demo Run code snippet

.box {
  height: 200px;
  width: 550px;
  background-color: white;
  margin-left: 10px;
  margin-top: 20px;
  border-radius: 100px;
}
.boximg {
  float: left;
  height: 70px;
  width: 70px;
  margin-left: 50px;
  margin-top: 50px;
}
.box h1 {
  margin-left: 200px;
}
.box p {
  margin-left: 200px;
}



  
    
    
    
    
    Document
  
  
    
      
        
        This is Title
        
          My Name is xyz. Lorem, ipsum dolor sit amet consectetur adipisicing
          elit. Incidunt enim numquam impedit cumque placeat quibusdam iusto cum
          saepe sit unde nemo totam aliquid, sapiente animi alias obcaecati

user_18024445 · Answer

No magic happens. Your content simply does not fit inside your div. Sum of margins of your elements plus image height are greater than height of your div. Default DIV overflow is visible, so content looks as if it was placed outside.

To ensure content never overflows its parent element, you can change overflow property of the parent element. For example, you can temporary set overflow:auto on your div. This will automatically show scroll bars for your content.

You can fix it by reducing margin-bottom of your image or by increasing height of your div.

user_4536201 · Answer

You can adjust by margin with position relative.

element.style {
    position: relative;
    margin-top: -10%;
    margin-left: 10%;
}

Add threw percentage instead of px to make it little bit responsive :-)

html/css text is not appearing inside the div

4 Answers