I confront... this one.. Unable to place two different images side by side.... After all I 'm 17... Pls help
shank
0
Newbie Poster
Recommended Answers
Jump to Postokay... 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 …
All 2 Replies
autocrat
52
Posting Pro in Training
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>
MidiMagic
579
Nearly a Senior Poster
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.
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.