CODEWITHSUNDEEP
htmlcss
Mohammed Mounir
Mohammed Mounir

Reputation: 81

Making Images side by side with the same width and height?

I'm new to HTML and CSS, I created HTML/CSS page and want to put 4 Images side by side with different width and height, I want all of them to be same width and height, because they don't look good with different width and height, also the info doesn't appear on the same line because of that

CSS:

      p {
        line-height: 20px;
        margin-bottom: 20px;
    }
     .clear {
        clear: both;
    }

    .wrapper {
        margin: 0 auto;
        padding: 0 10px;
        width: 940px;
    }       
    #primary-content {
        background-color: #f8fafa;
        padding: 20px 0;
        text-align: center;
    }

    #primary-content h3 {
        display: block;
        margin: 0 auto 20px auto;
        width: 400px;
        border-bottom: 1px solid #02b8dd;
        padding: 0 0 20px 0;
    }

    #primary-content images{
        margin: 20px 0;
    }

HTML:

<div id="primary-content">
    <div class="wrapper">
        <article>
            <h3>Test</h3>

            <images>

                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img1.jpg" alt="img1" title="img1" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img2.jpg" alt="img2" title="img2" style="width: 100%" /> info
                </p>



                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img3.jpg" alt="img3" title="img3" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img4.jpg" alt="img4" title="img4" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img5.jpg" alt="img5" title="img5" style="width: 100%" /> info
                </p>


                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img6.jpg" alt="img6" title="img6" style="width: 100%" /> info
                </p>

                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img7.jpg" alt="img7" title="img7" style="width: 100%" /> info
                </p>

                <p style="float:left; width: 23%; margin-right: 2%; margin-bottom: 0.5em;">
                    <img src="images/img8.jpg" alt="img8" title="img8" style="width: 100%" /> info
                </p>

                <div class="clear"></div>
            </images>

        </article>
    </div>
</div>

Thanks

Upvotes: 0

Views: 5409

Answers (3)

sammyb123
sammyb123

Reputation: 493

I am not sure if you want the images side by side with no margin in between or if you want the 2% margin in between so I did both in the same fiddle to show while working with your existing code:

what I did is removed the images tag and wrapped the images with a div and named the class "images" and styled it with display:inline-block. I also gave each image an id of "img" and styled with the desired width and height.

Please note that I gave the first image a margin-right of 0 so that they can be side by side with no gap and left the others at 2% to show you how each would look.

https://jsfiddle.net/ychpjxps/2/

Here is css:

.images{
  display:inline-block;
}


#img{
  width:75px;
  height:100px;  
}

Upvotes: 0

cup_of
cup_of

Reputation: 6687

do something like this:

<div class="images">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
  <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg">
</div>

.images img {
  width: 100px;
  height: 100px;
  float: left;
}

give all your images a width and a height and float them left

jsFiddle Link

https://jsfiddle.net/qe3m2ryv/

Helpful information: No need to wrap each of your images in its own <p> tag in this situation. And the tag <images> doesn't exist. Use a div and give it a class called images.

Upvotes: 2

omid nematollahi
omid nematollahi

Reputation: 461

Put your 4 image in 4 div with the same fixed height and set width:100%; to your images. I think this solution work for you.

Upvotes: 1

Related Questions