...

View Full Version : Lost padding!



Rain Lover
07-16-2011, 01:45 PM
Hi,

I tried the following in IE8 and the latest versions of Firefox and Opera:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div
{
background-color:#00FFFF;
width:300px;
height:82px;
overflow:auto;
white-space:nowrap;
padding:0 20px;
}
</style>
</head>

<body>

<div>
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
<img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="">
</div>

</body>
</html>

There's no padding on the right. What am I missing?

Many thanks in advance!
Mike

vikram1vicky
07-16-2011, 03:19 PM
adjust width:480px (total width of images you want to have in div.

overflow property does not work if width or height is defined.


:)

Rain Lover
07-16-2011, 04:54 PM
adjust width:480px (total width of images you want to have in div.

overflow property does not work if width or height is defined.


:)

I don't have a fixed number of images.

vikram1vicky
07-17-2011, 12:51 PM
The dont mention width property at all.... let me wht u want 2 do.... all images should be in 1 line only they can be in multiple lines???

Rain Lover
07-17-2011, 03:32 PM
all images should be in 1 line only they can be in multiple lines???

One line.

Sammy12
07-17-2011, 10:28 PM
use min-width then: set it to the width of one image possibly and a max-width for the largest width you have.

Might I add that white-space: nowrap probably not the best option here. Might even consider using floats for the images

The only time I use white-space: nowrap is for text-overflow: ellipsis and for user-input titles. I don't see a need for it other than that.

Rain Lover
07-18-2011, 11:02 AM
use min-width then: set it to the width of one image possibly and a max-width for the largest width you have.

Might I add that white-space: nowrap probably not the best option here. Might even consider using floats for the images

The only time I use white-space: nowrap is for text-overflow: ellipsis and for user-input titles. I don't see a need for it other than that.

I'm confused! Would you mind providing an embed code?

Chris Hick
07-18-2011, 11:20 AM
What the two above are asking is, are all your images the same size or different sizes? If all the images are the same size, you need to make sure that you add all their widths together + 40px padding. That total should be less than your set width that you have for the containing div, which is 300 px. If that total is not less than 300px, then you need to adjust the containing divs width to a larger size than the total.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum