floated images in row collapse when screen shrinks

  • Author
    Posts
  • #218509

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

    #218844

    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.

    #218861

    thanks

The topic ‘floated images in row collapse when screen shrinks’ is closed to new replies.