WordPress.com

1. michaeljohnmitchell
   Member
   Apr 20, 2008, 5:28 PM

   Hi, I am trying to create a design where I have 7 images at the top of the screen forming a banner. When the screen is fully opened, the images line up across the top. But when I shrink the screen at all, the images don't maintain their position in the top row but rather start collapsing (because the 7 images together are now too wide for the smaller screen). There must be a way I can get them to stay where they are.

   CSS

   .floatright
   {
   float: right;
   margin: 0 0 10 px 10 px;

   }

   HTML

   <img class="floatright" src="graphics/adventure.jpg" width="140" height="100">
   <img class="floatright" src="graphics/istanbul.jpg" width="140" height="100">
   <img class="floatright" src="graphics/barcelona.jpg" width="140" height="100">
   <img class="floatright" src="graphics/china.jpg" width="140" height="100">
   <img class="floatright" src="graphics/patagonia.jpg" width="140" height="100">
   <img class="floatright" src="graphics/hanoi.jpg" width="140" height="100">
   <img class="floatright" src="graphics/morepatagonia.jpg" width="140" height="100">

2. thesacredpath
   Member
   Apr 22, 2008, 3:49 AM

   My suggestion would be to put all the images together in an image editing program so that you have just one single image instead of 7. It would be much easier that way.

3. michaeljohnmitchell
   Member
   Apr 22, 2008, 2:52 PM

   thanks

Topic Closed

This topic has been closed to new replies.