Topic: Floats and wraps, an ongoing problem Pages that link to <a href="https://ozoneasylum.com/backlink?for=27235" title="Pages that link to Topic: Floats and wraps, an ongoing problem" rel="nofollow" >Topic: Floats and wraps, an ongoing problem\

 
Author Thread
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 12-31-2005 22:24 Edit Quote

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

Tyberius Prime
Paranoid (IV) Mad Scientist with Finglongers

From: Germany
Insane since: Sep 2001

IP logged posted posted 01-01-2006 13:21 Edit Quote

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.

DL-44
Lunatic (VI) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 01-01-2006 23:55 Edit Quote

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...

Ramasax
Maniac (V) Inmate

From: PA, US
Insane since: Feb 2002

IP logged posted posted 01-02-2006 00:43 Edit Quote
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.

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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

IP logged posted posted 01-02-2006 06:07 Edit Quote

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

Karl..



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu