Why is there huge space between between two pics on the left.. i want the pic to have same amount of space as the pics on right.. please help
Without seeing the code we cannot possibly answer your question... though given your images are uneven sizes what you are asking for is ... unreliable. Still, it can be done by just building it with floats... While your image appears to either be clearing floats every other image/element, or use tables for layout like it's still 1997.
hey its the example you showed me same code.. http://www.cutcodedown.com/for_others/Praveen198830/ didnt do any changes except the images..i am trying to learn but i got stuck with the spaces
Those should be stacking just fine as is. Do you have an example of what you've done to it? Though really, if the pictures aren't the same size, you'll find the behavior varies wildly between browsers. Is that third image wider than the others? that can force a float drop / screw up the stacking.
Generally speaking if you are going to have images of different aspect ratios, you should set a max-width. I'm not sure, but that second image (first image top-right) may be wider than the available space, and that's what's causing the stack... Though with them ALL float:left, they actually shouldn't compress/stack how you are thinking. You would need to make the ones on the right be float:right. Best way to do that IMHO would be to simply add: .captionedImages li:nth-child(even) { float:right; } Code (markup): Though when the screen gets too narrow for them to all fit, you'd want to undo that with a media query. That said, those images are WAY too big to put on a page like that -- I'd use a lot smaller thumbs and have the links go to the larger images; though with the fixed metric max-width and absurdly undersized px metric fonts, there are other issues to be dealt with first. Another option might be to pull the floats altogether and use the new flex-box model, but that doesn't work on older browsers and is still kind-of in development limbo.