Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts

    positioning images

    How can I make the image on the right be the same height as the image on the left?

    http://printco.org/shop.html

    What would be the easiest way to code this in CSS?



    Thanks,

    Josh

  • #2
    Regular Coder ahayzen's Avatar
    Join Date
    Jun 2009
    Posts
    110
    Thanks
    8
    Thanked 11 Times in 11 Posts
    In you HTML add height attributes.

    Code:
    <a href="#"><img src="images/businessCards1.jpg" alt="Business Card Offer" style="height:264px;" /></a>
    <a href="#"><img src="images/letterheads.jpg" alt="Letterheads Offer" style="height:264px;" /></a>
    Then just change the height accordingly. Also you may want to add the width attributes.

    Andy

  • #3
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Thanks for the reply but this doesn't make the right hand side image align with the bigger image at the top. You are just setting the height of the image?

  • #4
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    How does the image in your original post relate to what you want on your shop page?

    In the image in your original post there is one large image top left and two smaller images on top of each other top right. Do you want to achieve the same layout on your shop page?

    On the other hand if the image in your original post does not relate to what you want, how do you want the two images on your shop page to change in relation to each other.

    Do you want them both the same height as the left hand image, but keep their existing widths?

    Do you want them both the same height as the left hand image, but the right hand image to also be stretched to keep the same aspect ratio? If this, what to do you want to do about the image subsequently extending beyond the white background?

    Do you want the left hand image to be reduced in size, the right hand image expanded in size, so that they are both the same height, and remain within the white background?
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #5
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by mbaker View Post
    How does the image in your original post relate to what you want on your shop page?

    In the image in your original post there is one large image top left and two smaller images on top of each other top right. Do you want to achieve the same layout on your shop page?

    On the other hand if the image in your original post does not relate to what you want, how do you want the two images on your shop page to change in relation to each other.

    Do you want them both the same height as the left hand image, but keep their existing widths?

    Do you want them both the same height as the left hand image, but the right hand image to also be stretched to keep the same aspect ratio? If this, what to do you want to do about the image subsequently extending beyond the white background?

    Do you want the left hand image to be reduced in size, the right hand image expanded in size, so that they are both the same height, and remain within the white background?
    Hi,

    Thanks for your reply.

    Sorry for the confusion, I want it to exactly the same as the actual image posted. The small image I have there I want it to be in line with the top of the larger image so I can then post another image underneath it.

    I hope I have answered your question.

    Regards,
    Josh

  • #6
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Have you tried float:left on your images. Something like:

    #shop img {
    float:left;
    }
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.

  • #7
    Regular Coder
    Join Date
    Nov 2008
    Posts
    175
    Thanks
    4
    Thanked 6 Times in 6 Posts
    Quote Originally Posted by mbaker View Post
    Have you tried float:left on your images. Something like:

    #shop img {
    float:left;
    }
    Thanks, that worked perfectly. Can't believe how easily they went into place after that. I floated my div left but that didn't make it work, I guess the images individually had to be floated left? If that's not the answer please can you explain the answer so I can learn from this.

    Thanks again,
    Josh

  • #8
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    float:left (and float:right) are applied to the element / id / class that they are defined for.

    In this instance all of the images are floated left in their containing div.

    The first image is placed at the top of the div on the left. If there is sufficient width available the next image is placed at the top of the div to the immediate right of the first image, otherwise it is place below the first image on the left of the div.

    Subsequent images are placed as high in the containing div as possible.

    Provided you design / make your images of sizes that will stack up neatly, use sufficient of the div width so that following images are moved down the page, and list them in the correct order, they will stack up nicely on your page.
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •