Home/ Questions/Q 6821079
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T21:30:08+00:00

I have this: <html> <head> <title></title> <meta http-equiv=’Content-Type’ content=’text/html; charset=utf8′> <style type=’text/css’> body {

  • 0

I have this:

<html>
<head>
    <title></title>
    <meta http-equiv='Content-Type' content='text/html; charset=utf8'>
    <style type='text/css'>
        body {
            background-color: #000;
        }
    </style>
</head>
<body>  
    <img src="1.jpg" height="100%" style="float: left;" />
    <img src="2.jpg" height="100%" style="float: left;" />
    <img src="3.jpg" height="100%" style="float: left;" />
    <img src="4.jpg" height="100%" style="float: left;" />
</body>
</html>

This is big images. But my browser show me two images side by side and next in a new line.
I want to disply it all in one line. How to do it?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Stop floating the images and set white-space: nowrap on the body or some other wrapper element.

    body {
    white-space: nowrap;
}

    and:

    <body>  
    <img src="1.jpg" height="100%" />
    <img src="2.jpg" height="100%" />
    <img src="3.jpg" height="100%" />
    <img src="4.jpg" height="100%" />
</body>

    Demo: http://jsfiddle.net/ambiguous/4Udam/

    • 0