Stop images from stacking.

[Crys]

Hello there,

On my forum homepage, when I shrink down the explorer window, all the images start to stack on top of one another. How do you lock the images so that there's a fixed width and everything stays put??

Here's the forum homepage:

www.iaf-forum.org

Here's the banner code:

<div id="wrapleft">
<div id="wrapright">

<img src="images/onlydev/misc/top_left.gif" class="fleft" alt="" />
<img src="images/onlydev/misc/top_right.gif" class="fright" alt="" />

<div id="wrap">

<div id="topnav"><img src="images/onlydev/misc/topnav_right.gif" class="fright" alt="" /><img src="images/onlydev/misc/topnav_left.gif" alt="" /><a href="$vboptions[forumhome].php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_home','','images/onlydev/misc/topnav_home_over.gif',1)"><img src="images/onlydev/misc/topnav_home.gif" name="topnav_home" id="topnav_home" alt="$vboptions[bbtitle]" /></a><a href="calendar.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_events','','images/onlydev/misc/topnav_events_over.gif',1)"><img src="images/onlydev/misc/topnav_events.gif" name="topnav_events" id="topnav_events" alt="$vbphrase[calendar]" /></a><a href="$vboptions[contactuslink]" rel="nofollow" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('topnav_contact','','images/onlydev/misc/topnav_contact_over.gif',1)"><img src="images/onlydev/misc/topnav_contact.gif" name="topnav_contact" id="topnav_contact" alt="$vbphrase[contact_us]" /></a><img src="images/onlydev/misc/topnav_mid.gif" alt="" /></div>

<div id="overflow: auto">
<div class="fright" id="nav">

<a href="register.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_register','','images/onlydev/misc/nav_register_over.gif',1)"><img src="images/onlydev/misc/nav_register.gif" name="nav_register" id="nav_register" alt="$vbphrase[register]" /></a>

<a href="usercp.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_cp','','images/onlydev/misc/nav_cp_over.gif',1)"><img src="images/onlydev/misc/nav_cp.gif" name="nav_cp" id="nav_cp" alt="$vbphrase[user_cp]" /></a>

<a href="memberlist.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_members','','images/onlydev/misc/nav_members_over.gif',1)"><img src="images/onlydev/misc/nav_members.gif" name="nav_members" id="nav_members" alt="$vbphrase[member_list]" /></a>

<a href="faq.php$session[sessionurl_q]" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_faq','','images/onlydev/misc/nav_faq_over.gif',1)"><img src="images/onlydev/misc/nav_faq.gif" name="nav_faq" id="nav_faq" alt="$vbphrase[faq]" /></a>

<a href="search.php$session[sessionurl_q]" accesskey="4" rel="nofollow" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('nav_search','','images/onlydev/misc/nav_search_over.gif',1)"><img src="images/onlydev/misc/nav_search.gif" name="nav_search" id="nav_search" alt="$vbphrase[search]" /></a>

<img src="images/onlydev/misc/nav_bottom.gif" alt="" /></div>

<a href="$vboptions[forumhome].php$session[sessionurl_q]"><div style="text-align: right;"><div id="header"><img src="images/onlydev/misc/logo.jpg" alt="$vboptions[bbtitle]" /></div></div></div></a>

<!-- content table -->

$_phpinclude_output

I really need your help on this one because I'm just way too confused on why this is happening..:confused:

Thanks a lot!

~ Crys ^^

[Kuntz]

Put it in a table and use 'nowrap'.

<table><tr><td nowrap>img img img img</td></tr></table>

[Dismounted]

Or you can use the CSS white-space property.
white-space: nowrap;

[Crys]

Where do I place this code Dismounted??

Not really good at HTML..

Thanks!

~ Crys ^^