floated images in row collapse when screen shrinks

• 

  michaeljohnmitchell · Member · Apr 20, 2008 at 5:28 pm

  • Copy link
  • Add topic to favorites

  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″>

• 

  thesacredpath · Member · Apr 22, 2008 at 3:49 am

  • Copy link

  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.

• 

  michaeljohnmitchell · Member · Apr 22, 2008 at 2:52 pm

  • Copy link

  thanks