Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Scroll content right padding in IE7

Right Padding Inside scroll not showing

9:49 pm on Mar 24, 2010 (gmt 0)

5+ Year Member

I have a table inside a scroll div and the table does not take any margin-right or padding, it stays flush to the right of the scroll box. I also have a div with a background color and that stays flush to the right. Any help would be appreciated.

Here's the code
(My very first post ever! )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

.note {float: left; background-color: #e9f0f3; width: 100%; padding: 5px; margin-right: 10px;}
.body-scrollpadding {padding: 5px;}

.body-scrollfullscreen {height: auto; min-height: 100px; max-width: 816px; width:816px; border: 1px solid #999999; height: 380px; overflow-y: scroll; overflow-x: hidden; margin: 0px 40px 0px 40px;}

table.data-style1 {width: 98.5%;}
.data-style1 {float: left; color: #424345; border: 1px solid #c2c2c2; margin: 0px 0px 20px 0px; *margin-right: 25px; _width: 98.5%; width: 100%; margin-right: 10px;}
.data-style1 caption {text-align: left; padding-left: 4px; font-weight: bold; padding-bottom: 15px;}
.data-style1 caption span {color: #11b5ce; font-weight: normal;}
.data-style1 td, .data-style1 th {padding: 3px;}
.data-style1 tr th {font-weight: bold; text-align: left; color: #ffffff; border-bottom: 1px solid #c2c2c2;}
.data-style1 tr td{border-bottom:1px dotted #c2c2c2;}
.data-style1 th {background-color: #11b5ce;}
.data-style1 tr.last td {border-bottom: none;}
.data-style1 .even {background:#f2f7f9;}
.checkbox {width: 20px; border: none;}
.subj {font-weight: bold;}
.col-1 {width: 40px; padding: 5px 0px 5px 5px;}
.col-2 {width: 155px; padding: 5px 0px 5px 5px;}
.col-3 {width: 155px; padding: 5px 0px 5px 5px;}
.col-4 {width: 150px; padding: 5px 0px 5px 5px;}
.col-5 {width: 145x; padding: 5px 0px 5px 5px;}
.col-6 {width: 110px; padding: 5px 0px 5px 5px;}




<div class="body-scrollfullscreen">
<div class="body-scrollpadding">
<div class="linespace"></div>
<div class="note"><p>example text</a></p></div>

<div class="linespace"></div>

<h2 class="float-left">Registered</h2>
<div class="float-right"><a class="primary" href="#" onclick="this.blur();"><span>Add User</span></a></div>

<table class="data-style1" cellspacing="0">

<th scope="col" class="col-1">&nbsp;</th>
<th scope="col" class="col-2">First Name</th>
<th scope="col" class="col-3">Last Name</th>
<th scope="col" class="col-4">Email</th>
<th scope="col" class="col-5">Type</th>
<th scope="col" class="col-6">Active?</th>
<td><a href="#" class="icon-edit" title="Click to Edit"><span class="hide">Edit</span>&nbsp;</a></td>
<td><input class="checkbox" type="checkbox" /></td>


</div><!--end body-->


[edited by: limbo at 1:32 am (utc) on Mar 25, 2010]

3:55 pm on Apr 16, 2010 (gmt 0)

5+ Year Member

try wrapping the whole thing into another div where you can set the margin or padding properties according to your needs.

make sure that the width of the wrapping div is the same or more than the sum of the divs and tables inside.