Picture left and right

How can I have my pictures beside eachother and not above below

the code I use

<a href=“http://folder.picture.pg” target=“_blank”><img src=“http://picture.png” align=“right”>></a><br><b>words</b><br><b>words</b>
<br>
<br>
<a href=“http://folder.picture.pg” target=“_blank”><img src=“http://picture.png” align=“right”>></a><br><b>words</b>

I have about 40 pictures I like to align against eachother but align right nothing works.

You can put the CSS in the head of the document, but it would be better to link to an external style sheet.

Put this in your <head> section
<link href=‘style.css’ type=‘text/css’ rel=‘stylesheet’>

Sorry for posting in the wrong section

I put that code in but still shows above to bottom didn’t use any <br> tags. Yes every picture with new link its like a gallery.

And the css code:

.image {width: 200px; height: 200px; float: left; margin: 0 10px 10px 0; font-weight: bold;}
.image a {display: block;}
.image img {border: none;}
 
.clear {clear: both;}

I don’t know where to put that because Im inserting this code on a page not webhost uploading style.css

Just open style.css and stick that in there :). Anywhere will do.

Firstly this has nothing to do with PHP.
Secondly you are using <br> to separate images, a line break will naturally make them appear vertically. I’d wrap each link/image/words section in a div, which is floated to the left and has a fixed with (e.g. 200px). Use a CSS document, not inline styles for this.

Thirdly to you really want every image to open in a new separate tab?


<div class='image_container'>
	<div class='image'>
		<a href="http://folder.picture.png" target="_blank">
		<img src="http://picture.png">
		</a>
		words
	</div>
	
	<div class='image'>
		<a href="http://folder.picture.png" target="_blank">
		<img src="http://picture.png">
		</a>
		words
	</div>
	
	<div class='image'>
		<a href="http://folder.picture.png" target="_blank">
		<img src="http://picture.png">
		</a>
		words
	</div>
	
	<div class='clear'></div>
</div>


.image {width: 200px; height: 200px; float: left; margin: 0 10px 10px 0; font-weight: bold;}
.image a {display: block;}
.image img {border: none;}

.clear {clear: both;}