Welcome to WebmasterWorld Guest from 54.147.250.33

Forum Moderators: not2easy

Lost padding!

   
11:57 am on Jul 16, 2011 (gmt 0)

5+ Year Member Top Contributors Of The Month



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
1:26 pm on Jul 16, 2011 (gmt 0)

10+ Year Member



The inner content overflows the box and sits on top of the padding. The scrollbar will only move the content until it fits in the box. It will not scroll it past its own padding.

If you applied the right padding (or margin) to the image itself then it would scroll further into view to account for the inner content.

It's easier explained with a demo.

set the width to zero and add 200px right padding. the width of the scroll box is now only 200px and the inner contents overflows the padding in the box so a scrollbar is a added but will only scroll the inner content until it fits into the box.


div {
background-color:#00FFFF;
width:0;/* no width */
height:82px;
overflow:auto;
white-space:nowrap;
padding:0 200px 0 0;/* 200px right padding */
}



The implementation of overflow according to the specs is UA dependent so there may be difference between browser implementations.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month