CSS layout problem

willjoe86 posted this at 17:55 — 6th March 2006.

Joined: Jan 2006

Im having a small problem with a image that I'm floating left which is right next to another image I'm floating right. When the browser window is resized smaller, the image on the right moves underneath the left image. Here is the site:

http://tanismedia.net/tanistemplate.html

Is there any way to prevent this?

Thanks

timjpriebe posted this at 19:36 — 6th March 2006.

He has: 2,667 posts

Joined: Dec 2004

I'm not sure if there's a way to directly prevent that, but another option is to make one of the images a background image of a div, and then float the other image within that div.

Tim
http://www.tandswebdesign.com

demonhale posted this at 03:40 — 7th March 2006.

He has: 3,278 posts

Joined: May 2005

hey try two float lefts, one for the first image and another for the second, if not try using a single div wrap it to the two img tags and just directly assign tags with no floats and the div will float aorund, but the two images will stick together...

Renegade posted this at 06:49 — 7th March 2006.

He has: 3,022 posts

Joined: Oct 2002

This is the way it is meant to work, if you don't like this, don't float both objects. Try doing something like this:

#left-image {
position:relative;
margin:0;
padding:0;
float:left;
width:10em;
}

#right-image {
position:relative;
margin:0 0 0 10em;
padding:0;
}

And of course the HTML:

<div id="left-image">
<img src="left-image.gif" width="100" height="100" alt="" title="" />
</div>
<div id="right-image">
<img src="right-image.gif" width="100" height="100" alt="" title="" />
</div>

I haven't tested the code but, try it and see if it works.