CODEWITHSUNDEEP
htmlcss
user5658591
user5658591

Reputation:

Image is positioned outside the container

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  height: 410px;
  width: 100%;
}
h1.sub2 {
  font: bold 100px american captain;
  text-decoration: underline;
  float: right;
}
p.sub2- {
  font: italic 25px american captain;
  margin-top: -300px;
  margin-left: 750;
}
<div class="sub2">
  <h1 class="sub2"> Smartphones </h1>
  <img src="D:\ps\Notepad++\sub2.jpg" alt="Smartphones" style="width:47%;height:400px;">
</div>

The image i.e. smartphones is not coming inside the container i.e. sub2. the image is inside the <div> of the container but still it slips out and also the h1 "smartphones" is not going to the right even after putting <float> in it. Any help would be highly appreciated.

Upvotes: 2

Views: 58

Answers (2)

MozenRath
MozenRath

Reputation: 10030

Need to have a different class for h1. otherwise it will inherit the properties for sub2. Also, there is no need of a height restriction on the div as we just want to encompass all of the image in our div's background. let the browser handle the height of the div. just specify the size of the various components in a div and it will be sized according to that.

Also, use title instead of alt to make it work here.

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  width: 100%;
}
.sub3 {
  font: bold 100px american captain;
  text-decoration: underline;
  float: right;
}

.phone{
  width:47%;
  height:400px;
}
<div class="sub2">
  <h1 class="sub3"> Smartphones </h1>
  <img src="D:\ps\Notepad++\sub2.jpg" class="phone" title="Smartphones">
</div>

Upvotes: 1

G.L.P
G.L.P

Reputation: 7207

Try to use like this: Demo

In your code, sub2 div have fixed height, try to change it like min-height

.sub2 {
  background-color: #FFFFBF;
  margin-top: 30px;
  min-height: 410px;
  width: 100%;
}

.sub2 h1{
  font: bold 100px american captain;
  text-decoration: underline;     
  text-align: right; /*removed float and added text align */
}

.sub2 img {
  max-height: 410px;
  width: 100%;
}

p.sub2 {
  font: italic 25px american captain;
  margin-top: -300px;
  margin-left: 750;
}

In HTML:

<h1 class="sub2"> Smartphones </h1>

In your code the only one h1 tag is there inside sub2, you can use css like .sub2 h1, so there is no need to specify any class like h1.sub2 (same name as parent) for h1 again.. If you have more h1 tags with different style, you can specify .sub2 h1.classname1, .sub2 h1.class name2...

Upvotes: 0

Related Questions