Guidance with Web Design styles

Hi, I am building a website for selling programs and scripts
The pages are built with a title and the body which contains screenshots.
My problem is that most of the screenshots are tall and skinny. This led me to think that I should float them to one side and let the text wrap around them.
However, after looking at many sites on the web I see that nobody wraps text around images, rather they have images as block elements. The problem with this is that since they are skinny images, there tends to be a lot of empty space on that "line" when viewed on large screens.

What is the recommended style for such pages? Wrap text around images or make them block with a lot of empty space on the sides.

Thanks,
Davey

 

Hi Davey,
I doubt there's a recommendation for something like that, is there? It's a matter of taste I guess...
But I'd possibly go with your way: reduce empty spaces as much as possible. Like this: https://jsfiddle.net/thzgd09s/5/

Could you share yours ...in here?
Hendra

 

@hdewantara - Thanks
If it's a matter of taste, then I think I would go with inline images. My problem was just that I haven't seen websites using that styling, rather mostly using block style images. But most of their images are wide, so it works. Mine, however, are narrow and tall - that's where my problem begins.

Regarding sharing mine, I can't really at this point because it is still confidential (the owner doesn't want me showing it yet) - But I will try to maybe mock it up

Thanks,
Davey

 

floating images to let text wrap around them is fine if they're narrow, so long as you have a plan in place to adjust when the screen is too narrow to fit them. People do it all the time and I'm not sure where you are getting the idea people don't...

Well, unless you're looking at artsy fartsy train wrecks of how NOT to build websites slopped together by PSD jockeys under the DELUSION they are "designers"... that or if you've done something stupid like used a fixed width layout instead of a proper semi-fluid elastic responsive design, you may encounter difficulties with some of the simpler concepts.

But I'd have to see the content (text and images) in questions to weigh in properly on the subject.

 

You are right, photos with empty spaces under are just ugly, there is no discussion about that. There is a neat trick i noticed programmers use thou. You can make products round and make images centered as covers. This will help you a lot.

Example:
HTML:
<div>
<div id="avatar">

</div>

CSS:
#avatar {
background-image: url('PRODUCT PICTURE LINK HERE');
/* make a square container */
width: 150px;
height: 150px;
align-items: center;
align-content: center;
/* fill the container, preserving aspect ratio, and cropping to fit */
background-size: cover;
/* center the image vertically and horizontally */
background-position: center;
/* round the edges to a circle with border radius 1/2 container size */
border-radius: 50%;
margin: auto;
border: 2px solid #fff;
box-shadow: 0px 20px 120px #000;
}

 

@deathshadow - Thanks!
Yesterday I made the decision to go ahead with my original instinct to make them wrap and after I did I was very happy! It came out great!
And now after reading what you also suggested - I am even more comfortable.

Regarding the content, I understand - but I think I understand you well enough.
Basically, if there is enough space for words around the picture (where it wont be too few words) then it is fine and accepted - and even correct - to style it with wrap.
However, this has to be fluid so if the screen size is small it should display properly... I did that! I basically removed the float at smaller screen sizes, so then the picture is stand alone and centered - looks great!

Thanks a lot!

@David, thanks for the suggestion. Round is not really going to do it for me in this situation, but I will keep this in mind. Thanks.