CODEWITHSUNDEEP
htmlcss
Danielle
Danielle

Reputation: 33

Img not contained in Div

I'm essentially trying to create a div which includes a title, an image, description and some social media buttons. I want multiple instances of the same div on the website. Creating sort of like a meet the team page. However, I'm not getting everything to position properly. Using Mozilla Firefox editor, I realize the image isn't contained into the div. What could be the cause of this? I want them to line up one after the other with space in-between.

Current view of webpage:

enter image description here

Div not contained in webpage:

enter image description here

HTML snippet:

<div>
  <h2> DJ Name 1 </h2>
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p>
</div>

<div>
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. <p>
</div>

I've taken out the social media buttons section because I don't think that is relevant at this point.

CSS snippet:

.djimage{

    height:400px;
    position: absolute;
    margin-left:20%;
}
.about {
    margin-left:50%;

    text-align:left;
    float: right;
    width: 284px;
z-index: 1;
position: absolute;
font-size :14px;
font-family: Arial;
}
h2 {
    margin-left:50%;
    position: absolute;
    text-align:left;
    float:right;
}

Upvotes: 0

Views: 458

Answers (2)

Văn Quyết
Văn Quyết

Reputation: 2526

You can try class row:

<div class="row">
  <h2> DJ Name 1 </h2>
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. 
</p>

</div>

Or add a div tag with class clearfix as this:

<div>
<img class="djimage" src="dj1.png" alt="Smiley face"> 
<p class="about">
Prevailed sincerity behaviour to so do principle mr. As departure at no propriety zealously my. On dear rent if girl view. First on smart there he sense. Earnestly enjoyment her you resources. Brother chamber ten old against. Mr be cottage so related minuter is. Delicate say and blessing ladyship exertion few margaret. Delight herself welcome against smiling its for. Suspected discovery by he affection household of principle perfectly he. 
</p>
<div class="clearfix"></div>
</div>

CSS

.row:after {
    content: "";
    clear: both;
   display: block;
}

.clearfix {
    clear: both;
    height: 0;
    line-height: 1px;
    font-size: 1px;
}

And you need to replace <p> by </p> at close tag position

Upvotes: 0

u8y7541
u8y7541

Reputation: 558

After reading your code, I found that you have not closed your paragraphs correctly.

After the first paragraph, you have ended it with <p> instead of </p>, and the same for the second paragraph. This may mess up the alignment because you are initializing a paragraph inside a paragraph, twice, and not even closing the tags. Try fixing them and the images may align properly.

Upvotes: 1

Related Questions