CODEWITHSUNDEEP
htmlcss
Shehrooz
Shehrooz

Reputation: 39

html/css text is not appearing inside the div

enter image description here

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;
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Testing Person Card</title>
  <link rel="stylesheet" href="css/style.css"> </head>
<section class="container" style="width: 1920px; height: 500px; background-color: gray; overflow: auto;">
  <div class="box"> <img src="images/person1.png" alt="Person1">
    <h1>this is</h1>
  </div>
</section>

</html>

Upvotes: 2

Views: 558

Answers (4)

Dmitri Nosovicki
Dmitri Nosovicki

Reputation: 11

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.

Upvotes: 0

Dharmik
Dharmik

Reputation: 39

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;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <section
      class="container"
      style="width: 100%; height: 500px; background-color: gray; overflow: auto"
    >
      <div class="box">
        <img class="boximg" src="https://i.ibb.co/nkcb8Rt/img.jpg" alt="Person1" />
        <h1>This is Title</h1>
        <p>
          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
        </p>
      </div>
    </section>
  </body>
</html>

Upvotes: 1

nat.laliberte
nat.laliberte

Reputation: 294

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);
}
<section class="container" style="width: 1920px; height: 500px; background-color: gray; overflow: auto;">
  <div class="box">
    <h1>this is</h1>
  </div>
</section>

Upvotes: 1

Vishal Bareja
Vishal Bareja

Reputation: 128

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 :-)

Upvotes: -1

Related Questions