homepage Welcome to WebmasterWorld Guest from 54.161.190.9
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Lost padding!
Rain_Lover




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

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

 

Paul_o_b




msg:4340309
 1:26 pm on Jul 16, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved