CSS Floating Images No Wrapping

AielloJ
AielloJ used Ask the Experts™
on
I have a banner area on a website under construction.  It is 939 pixels wide.  It is able to be populated with a number of images of varying widths based on the page displayed.  It may be 3 images of 313 pixels. or any combination of images that total 939 pixels.  I do not want the images to wrap to the next line if the user's browser window is set less than 939 pixels.  I want this to work similar to the CSS overflow hidden style for text.

A copy of the dwt file and the CSS file is attached.  The width of the img.Banner style may change as other image widths are created.

Thanks in advance. style.css.txt.css
Example.dwt.txt
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
Try putting them in a container with a hard width and hide the overflow. This should work as long as the images or child elements are floated.


<!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>Example</title>
		<style type="text/css">
			#bannerholder{width:939px;overflow:hidden}
		</style>
	</head>
	<body>
		<div id="header">
			<div id="bannerholder">
				<img class="Banner" alt="Server Rack" 
				longdesc="file:///C:/JRA_Systems/Internal Projects/JRAWebSite/Web/Web/images/Server_Rack.jpg" 
				src="../images/Server_Rack.jpg" />
				<img class="Banner" alt="Global Data Center" src="../images/Global_Data_Center.jpg" />
				<img class="Banner" alt="Program Code" src="../images/Program_Code.jpg" />(Banner)	
			</div>
		</div>
	</body>
</html>

Open in new window

Carlos LlanosIT Manager

Commented:
I agree with s8web...set overflow to none.

 
img.Banner
{
  float    : left; 
  height   : 170px;
  margin   : 0; 
  overflow : hidden;
  width    : 313px;
  overflow : hidden;
}

Open in new window

Author

Commented:
Thanks for the quick answer.  My apologies for the delay in awarding the points.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial