Topic: Floats and wraps, an ongoing problem

Floats and wraps, an ongoing problem..

For me that is. So, if you take two images, float one next to the other, have both of these within the confines a wrapper DIV, lets say this wrapper div is 500px wide, and the two images which are suppose to float side by side add up to 500px... (see where I am going with this?)... what bites, is that more often than not, the 2nd image flops to the next line. I need them to sit right next to each other nice and tight. I find myself wanting to throw these two images into a table (AAAAHHHH!!! the audience screams).

Please help.

Karl

Hm... first thing I usually do with such things is makeing sure I've specified all margins, paddings and borders explicitly - some defaults vary from browser to browser.

Well, images are not block level by default. If you simply place them one after another in your code, without floating them, they will naturally sit side by side (it is important to note that adding a float value of left or right to an element changes it's display value to block).

As far as the dimensions go, as TP said, make sure you are specifying everything explicitly and correctly, and if needed...simply increase the wrapper size...

quote:

---

DL: If you simply place them one after another in your code, without floating them, they will naturally sit side by side (it is important to note that adding a float value of left or right to an element changes it's display value to block).

---

And if you do so, make sure that there is no whitespace, no line breaks/no spaces, between the images in your code.

<div id="contain">
<img src="img1.jpg" width="250" height="250" alt="" border="0" /><img src="img2.jpg" width="250" height="250" alt="" border="0" /><img src="img2.jpg" width="250" height="250" alt="" border="0" />
</div>

If not, they will still wrap because....ummm...browsers suck.

Also, if you happen to be using any global declarations for images, specifically "img {display:block;border:0;}" which a lot of people use nowadays, be sure to set the images inside the container div to "display:inline;".

Do that, and what DL says will work perfectly.

Ram

(Edited by Ramasax on 01-02-2006 00:43)

Thanks for all of the tips, I hope to have time tomorrow to mess around with this stuff.
Happy New Year All!

Karl..