how to indent borders using css or jquery?

areyouready344
areyouready344 used Ask the Experts™
on
How to indent borders using css or jquery? Similar to how this web at http://fixedheadertable.com/
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
This is done using the box-shadow inset property.
This can be done using the margin directive.

Ensure that you use a container like <pre> or <div> for it to happen

The directive would something like

margin: 0 50px;

Which means margin from top and bottom are 0 and from left and right are 50px.

Commented:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
height:100px;
width:300px;
box-shadow: 0px 1px 0px rgba(255,255,255,0.5), inset 2px 2px rgba(0,0,0,0.05) ;
border:3px solid #5b636b;
border-radius:10px;
background-color:rgb(139,148,159)
}


</style>
</head>
<body>

<div></div>

</body>
</html>


</style>
</head>
<body>

<div></div>

</body>
</html>

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
thanks but anything better
Commented:
Same idea but modified to look more like the example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
body{
background-color:#b2b9c1;
}
div 
{ 
height:600px; 
width:60%; 
margin: 50px 20%; 
box-shadow: 0px 1px 0px rgba(255,255,255,1), inset 0px 3px 0px rgba(0,0,0,0.05); 
border:1px solid #5b636b; 
border-radius:10px; 
background-color:rgb(139,148,159) 
} 
#inner 
{ 
        height:80%; 
        width:80%; 
        margin:10% 10%; 
        background-color:rgb(255,255,255) 
 
</style> 
</head> 
<body> 
 
<div><div id="inner"></div></div> 
 
</body>
</html>

Open in new window

Author

Commented:
wow, thanks Amick

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial