rmce rmce - 4 months ago 6
HTML Question

Can't edit images in divs css

I am trying to build a website and I am making a collection of images that I want to be in a row with a margin of around 20 pixels (the images are in a div that is repeated for however many images there are). When I run the code the images appear in an weird configuration in that they seem to be layered. When I add 'img' to the div class the images then appear in a column which is not what I want. I have created a very simple website example with three repeated images that I want to be in a row. In previous websites I have been able to make the images appear in a row (the way I want it to be), but now this simply will not work. I will provide my code. Any help would be appreciated :).

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="main.css">
<body>

<div class="heading">
<h1>Test</h1>
</div>

<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>

<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>

<div class="image">
<img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>

</body>
</html>


CSS:

.image{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}

.heading{
text-align: center;
}


**CSS with 'img' added that puts images in column:

.image img{
display: inline-block;
width: 333px;
height: 250px;
margin: 20px;
}

.heading{
text-align: center;
}

Answer

Just add .image img {width:100%;} so that the images will cover their entire parent div and won't be overlapped

HTML: 
<!DOCTYPE html>
<html>
<head>
  <title>Home</title>
  <link rel="stylesheet" type="text/css" href="main.css">
<body>

<div class="heading">
<h1>Test</h1>
</div>

<div class="image">
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>

<div class="image">
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>

<div class="image">
    <img src="http://www.medicalnewstoday.com/content/images/articles/297/297449/a-cup-of-coffee.jpg">
</div>

</body>
</html>

<style>
.image{
    display: inline-block;
    width: 333px;
    height: 250px;
    margin: 20px;
}

.image img {width:100%;}
.heading{
    text-align: center;
}
</style>
Comments