Rasik Rasik - 7 months ago 22
HTML Question

Positioning of an element

I have to make a template for articles in my current project it should look something like this :
IMAGE

Which i made using this code:



//@import url(https://fonts.googleapis.com/css?family=Open+Sans);
//@import url(https://fonts.googleapis.com/css?family=Raleway);
* {
margin: 0;
padding: 0;
}

body {
z-index: 99;
}

.Template {
z-index: 99;
margin: 20px;
padding: 10px;
font-family: 'Raleway', 'Sans Serif';
letter-spacing: 1px;
}

.more {
cursor: pointer;
}

img {
height: 100%;
width: 100%;
}

.imghold {
float: right;
margin: 0px 20px;
height: 400px;
width: 400px;
z-index: 99;
}

<!--Template start-->
<div class="Template">
<h2>Heading</h2>
<div class="imghold"><img src="" alt="insert"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<p>
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<br>
<div class="more">
Read More
</div>
<P class="hide">
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<!--Template end-->
</div>





Now the problem is that when I add another div with the same name then I get something like
This

I want all the templates to be the same, How can I solve this problem while keeping in mind the responsiveness of this website? (A solution without the use of flota would be better)

Answer

After reviewing your code in a jsfiddle it looks like floating that image is causing it to float out of its parent div. You need to set the min-height property in the .Template class in your CSS. Why did I set it to 460px? Your image height is 400 pixels, plus your margin and padding on your .Template class.

.Template {
  z-index: 99;
  margin: 20px;
  min-height: 460px;
  padding: 10px;
  font-family: 'Raleway', 'Sans Serif';
  letter-spacing: 1px;
}
Comments