Need help? Check out our Support site, then


floated images in row collapse when screen shrinks

  1. michaeljohnmitchell
    Member

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

    thanks

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags