CODEWITHSUNDEEP
htmlcss
user3179778
user3179778

Reputation: 11

Align images within same row

I'm having trouble aligning some images. Below is a screencap of how things currently look:

enter image description here

I'm trying to get all four images to line up on the same "row". Any future images will start on a new row.

I've tried various methods, though none of them have worked. If a user can give my a rough start, I'd be grateful.

I'd like to add that each image has a simple animation:

        $(document).ready(function(){
        $("#id").hover(function(){
            $(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
            },function(){
            $(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
        });
    });

Upvotes: 0

Views: 188

Answers (4)

designhorf
designhorf

Reputation: 1

if you use float:left this will solve your problem.

Upvotes: 0

Davidicus
Davidicus

Reputation: 716

Without seeing your code it's hard to say for sure but it looks like your images don't fit in their container. If you are floating them when you run out of space elements are forced down to the next row. You can try, as mentioned by @davidpauljunior, to remove any right margins being applied to your images. If that doensnt work you can shrink the size of the images (if being applied by the background property) by reducing the width and height values by 90% (or whatever you may need) and applying

background size: 90%;

to the image containers. If they are inline images all the better. Just use

img {
  max-width:100%;
}

and remove any applied dimensions to the inline element. Hope that helps.

Upvotes: 0

Cam
Cam

Reputation: 1902

One method you can do to get all your images to line up and not have to throw your elements outside of the DOM (using Floats do that). Use display: inline-block; and vertical-align: top;

See example

img {
    display: inline-block; // This will align your items side-by-side
    vertical-align: top; // Why because by default Inline-block sets your vertical to baseline
}

Hope this helps.

Upvotes: 1

Cosmin Vană
Cosmin Vană

Reputation: 1582

Can you please post the html code where the images are included ? Normally you should be able to add them by applying the css style "float: left" and by making sure that the available width is enough (make sure to count padding of the container and margins of images to determine de available width).

Upvotes: 0

Related Questions