Jump to content

How do I force 2 images to load side by side?


DeX

Recommended Posts

I want them to stay side by side even when the browser window is resized. Currently if the browser is not as wide as both images, it'll move one below the other. I want them to stay side by side no matter what. Is it possible without a table?

Link to comment
Share on other sites

Ā 

If the browser is not as wide as both images, how can they stay side by side? Where is the room?

well i am not sure if that is the question of the topic starter, but in that case. do the same, but than also wrap it in a div with a fix width suitable to contain both... anyway first try out the display:block; float:left; thanĀ  come back if you have trouble with anything.

Link to comment
Share on other sites

I want them to stay side by side even when the browser window is resized. Currently if the browser is not as wide as both images, it'll move one below the other. I want them to stay side by side no matter what. Is it possible without a table?

What am I missing?

Ā 

How can you put 2 gallons in a quart container?

Ā 

Ā 

Link to comment
Share on other sites

I want them to stay side by side even when the browser window is resized. Currently if the browser is not as wide as both images, it'll move one below the other. I want them to stay side by side no matter what. Is it possible without a table?

What am I missing?

Ā 

How can you put 2 gallons in a quart container?

lol i read the question wrong :) so wrap it in a div with a fixed with. I just paid attention to the title ::) And thought he wanted no gap. Good one crmamx!

enfin:Ā  Wrap them in a div or any container (block) with a fixed width

Link to comment
Share on other sites

Nice one, I'll try the div and let you know, it'll be a day or two before I get back to that project.

But yes, I would like a scroll bar to appear in the browser if it's narrower than the 2 images.

Link to comment
Share on other sites

  • 2 weeks later...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>lazywebdesign.com</title><script language="JavaScript" type="text/javascript">lastScrollY=0;function heartBeat(){ var diffY;if (document.documentElement && document.documentElement.scrollTop)diffY = document.documentElement.scrollTop;else if (document.body)diffY = document.body.scrollTopelse{/*Netscape stuff*/}//alert(diffY);percent=.1*(diffY-lastScrollY); if(percent>0)percent=Math.ceil(percent); else percent=Math.floor(percent); document.getElementById("lovexin12").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";document.getElementById("lovexin14").style.top=parseInt(document.getElementById("lovexin12").style.top)+percent+"px";lastScrollY=lastScrollY+percent; //alert(lastScrollY);}suspendcode12="<DIV id=\"lovexin12\" style='left:2px;POSITION:absolute;TOP:120px;'>ad1</div>"suspendcode14="<DIV id=\"lovexin14\" style='right:2px;POSITION:absolute;TOP:120px;'>ad2</div>"document.write(suspendcode12); document.write(suspendcode14); window.setInterval("heartBeat()",1);</script><style type="text/css"><!--#lovexin12,#lovexin14{width:120px;height:250px;background-color:#e5e5e5;border:1px solid #ddd;}html,body{height:1000px;}#mm{height:1000px;}--></style></head><body><div id="mm"></div></body></html>

Link to comment
Share on other sites

  • 2 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.