CODEWITHSUNDEEP
htmlcss
Nips
Nips

Reputation: 13890

How to display images aligned to left?

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?

Upvotes: 0

Views: 85

Answers (3)

Ryan Kinal
Ryan Kinal

Reputation: 17732

Apply clear: left to your images as well.

<img src="1.jpg" height="100%" style="float: left;" />

Upvotes: 0

mu is too short
mu is too short

Reputation: 434965

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/

Upvotes: 2

srigi
srigi

Reputation: 1732

Just set really big value to body width:

body {
    width:5000px;
}

But this will introduce horizontal scrolling, you should know, that people hate to scroll horizontally. Why do you not use some kind of lightbox effect?

Upvotes: 1

Related Questions