html - Custom aligning multiple images -

i new css , working on school project. seem having trouble aligning images. it's supposed like:

this layout did on photoshop, i'm doing crop images , import them html file. importing 2 images right , having trouble aligning 2 of them:

this html code:

    <a href=""><img src="zotac_1.png" class="gpu"></a>     <a href=""><img src="webcam.png" class="webcam"></a> 

and css:

.gpu { margin-top: 10px; float: left; }  .webcam { float: left; margin: 10px 0px 0px 10px; } 

sorry long post

this can done css property clear. example in class might this.

.gpu {     margin-top: 10px;     float: left;     height:150px;     width:150px;     clear:both; } 

to better idea of how use clear here , see jsfiddle example.

edit additional example

looking @ images in question going want use containers. done wrapping few pictures in div , floating both image , div. take @ jsfiddle example

the code in jsfiddle produces output looks following.

note: if not using 1920x1080 monitor might need resize running area of jsfiddle make desired output

edit 2

to fix jsfiddle floated divs , add margin left separate them. code used.

.imgs, .leftimgs, .centerimgs, .rightimgs {   float: left;   margin-left: 10px; } 

note: if position .imgs class use following code instead.

.leftimgs, .centerimgs, .rightimgs {   float: left;   margin-left: 10px; }