I confront... this one.. Unable to place two different images side by side.... After all I 'm 17... Pls help

okay... are you using HTML + CSS?


If you are using Inline css styles...

<img src="picture1.jpg" alt="description1" style="float: left;">
<img src="picture2.jpg" alt="description2" style="float: left;">

If you are using Embedded (within the <style></style> tags)...

<style>
.imagefloatleft
{float:left;}
</style>

<img src="picture1.jpg" alt="description1" class="imagefloatleft">
<img src="picture2.jpg" alt="description2" class="imagefloatleft">

If you are using External CSS (in a seperate file and called within the <head> section)...
then it's the same as the above, but the Styling goes in the file :)


----

You may want to wrap the images within a "containing" element, such as a Span or a Div, as it may cause strange behaviours... such as protruding out of your main content sections.

If that happens, simply put a div/span around the images...

<div style="float: left; clear: both;">
   <img src="picture1.jpg" alt="description1" class="imagefloatleft">
   <img src="picture2.jpg" alt="description2" class="imagefloatleft">
</div>

If the width of the two images is wider than the width of the browser window, they will not stay side-by-side.

Also remember that if you have any margins, borders, or padding on the images, they will behave differently in different browsers.