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">
<head>
<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;}
</style>
</head>
<body>
<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">
<tr>
<th scope="col" class="col-1"> </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>
</tr>
<tr>
<td><a href="#" class="icon-edit" title="Click to Edit"><span class="hide">Edit</span> </a></td>
<td>Jane</td>
<td>Doe</td>
<td>email@example.com</td>
<td>employergroupmain</td>
<td><input class="checkbox" type="checkbox" /></td>
</tr>
</table>
</div>
</div><!--end body-->
</body>
</html>
[edited by: limbo at 1:32 am (utc) on Mar 25, 2010]
