Right now I have this

<div class="img-and-text">
<img src="imgone.png" alt="sometext" />
<p>Some text</p>
<img src="imgtwo.png" alt="moretext">
<p>Some more text</p>
</div>

This produces image one with it's text under it, then under that there is image two with it's text underneath it.

I would like my images to be side by side with it's respective text underneath each of them.

In addition to this I would also like this placement to be static and stay this way even if I change the size of the browser.So if I reduce the width of the browser it cuts it off and doesn't reform it to one on top of the other.

Can someone help me with this please?

Update. Just learned what a css is... so now I have

*.html

<link rel="stylesheet" type="text/css" href="style.css" />

<div class="myclass">
<img src="img.png" />
<div>Hello 1</div>
</div>

<div class="myclass">
<img src="img.png" />
<div>Hello 2</div>
</div>

*.css

.myclass
{
float : left;
margin-right : 50px;
text-align: left;
height : 325px;
}
.myclass img
{
height : 325px;
width : 325px;
}

This aligns everything correctly now the only problem is it reforming into one above the other when changing the width of the browser. Can someone help me make this static so it always stays in position?

Do you want two images in a row, always? You could wrap a DIV around each image pair and give it an explicit width.

BTW keep width and height for the images in the HTML. That helps the browser to draw the page. It will reserve space for the images and the page will load nicer without reflowing as the images fill in. Very noticable difference with large images. There is no point in moving that bit to CSS, really.

Thanks Pandy that worked!

While I have reservations on your views of confectionery I do admire your html knowledge.

Thanks, but what do you mean by confectionery?

I think it is a reference to your ' Don't like donuts' statement.

Of course! I had totally forgot about that. I actually love donuts. Real ones. And not those with glazing on them. And they shall be cooked in lard. I don't eat them but I love them.

I like old-fashioned donuts myself. Or better yet, an apple fritter, as long as it's done right, with a crunchy outside and a moist, tender inside.

Mmmm....

On a far less delicious subject, I have one more problem that has arisen.

I have a series of links composed of three parts. I want to arrange these links in a matrix of some sort so that I may easily find and click an entry.

Obviously a table would be great for two parts.

aa - ab - ac
ba - bb - bc
ca - cb - cc

I found this useful for that.

table style="width:50%">
<tr>
<td><a href="link">AA</a></td>
<td><a href="link">AB</a></td>
</tr>
<tr>
<td><a href="link">BA</a></td>
<td><a href="link">BB</a></td>
</tr>
</table>

What would be the best implementation of a three part system? arranging aaa aab aac etc? I know I'm a dimension short here, but what do you think would be the best way to arrange this on one page?

In a more structurally sound way than a table, you mean?

This is a little simplistic, but it works.





You'd probably want to add back some margin and padding here and there...