padded border within a div

tpeck · 10-28-2011, 12:26 PM

I'm not sure how to go about this.

I want to make the text fit only within the white space - with a border, say 80px, all around. I've tried padding, but it doesn't work on the right and probably bottom.

The demo page is here: http://www.aapress.com.au/gmc/demo.html

Code:

<!DOCTYPE html>
<html lang="en">

<head>
<title></title>
<link rel="stylesheet" href="css/style2.css" type="text/css" media="all">
<style>
body{margin:0}
#frame {background:url(images/frame1.png) top left no-repeat;height:760px;padding:100px 80px 80px 80px}
</style>
</head>

<body>

<div id="frame">
	<div class="content">
		<font color="#000">xxxxxxxxxxxxxxxxxxxuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxuuudb</font>
	</div>
</div>

</body>

</html>

coothead · 10-28-2011, 01:11 PM

Hi there tpeck,

try it like this...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    margin:0;
    background-color:#000;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
 }
#container {
    width:873px;
    height:780px;
    padding:78px 0 0 46px;
    background-image:url('http://www.aapress.com.au/gmc/images/frame1.png');
    margin:auto;
 }
#content {
    width:776px;
    height:684px;
    padding:25px;
    overflow:auto;
    font-size:100%;
    line-height:1.2;
 }
</style>

</head>
<body>

<div id="container">
<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla laoreet 
sollicitudin auctor. Nullam quis velit eget velit lobortis bibendum at 
sit amet enim. Sed vel metus id mauris placerat pulvinar non a nunc. 
Aliquam felis risus, viverra quis commodo vel, pharetra et sapien. Sed 
at arcu felis. Vestibulum ante ipsum primis in faucibus orci luctus et 
ultrices posuere cubilia Curae; Curabitur varius tempus euismod. 
Maecenas id congue nibh.
</p><p>
In ut nisi et nisi mattis congue. Sed feugiat velit in neque porttitor 
ornare. Aliquam nibh eros, cursus non cursus a, suscipit non lorem. 
Aliquam ipsum nulla, ullamcorper id dapibus rhoncus, ultrices sit amet 
ipsum. Integer pretium quam vitae ipsum rhoncus condimentum. Phasellus 
at tellus ut eros vehicula scelerisque ut id tellus. Aliquam erat 
volutpat. Cras vel felis quis enim ornare hendrerit a et lorem. Integer 
sed ipsum elit. Pellentesque ante erat, consectetur nec tempor cursus, 
laoreet nec metus. Pellentesque habitant morbi tristique senectus et 
netus et malesuada fames ac turpis egestas.
</p><p>
Morbi rutrum cursus metus eget mattis. Pellentesque magna enim, commodo 
nec mollis eu, dapibus in sapien. Pellentesque eget auctor tellus. Etiam 
ante lorem, tempus in elementum et, vestibulum sit amet nulla. Fusce at 
orci justo. Aenean lacus dolor, blandit a sodales a, blandit a justo. 
Duis pellentesque eros at eros lobortis sagittis. Vivamus in augue quis 
elit molestie euismod. Vivamus vitae nulla et augue feugiat faucibus 
blandit non dui. Donec ultricies est nec urna aliquam sed rutrum lorem 
eleifend. Pellentesque eu nibh massa, vel auctor quam. Integer ut diam 
at augue hendrerit tincidunt. Morbi elementum feugiat libero in 
condimentum. Nam lacinia ultrices sapien, et malesuada felis tempus at.
</p><p>
Fusce varius orci orci, eget rhoncus nunc. Nam luctus purus et arcu 
ornare vel auctor turpis bibendum. Vivamus tincidunt arcu nec eros 
porttitor aliquet. Fusce hendrerit viverra orci, ut vehicula lacus 
luctus sit amet. Nullam sapien quam, vehicula eu viverra ut, elementum 
ac magna. In aliquet, ligula ut mattis posuere, nulla nisl commodo nulla, 
sit amet luctus nisi sapien id tellus. Sed convallis, nisl in iaculis 
placerat, neque enim congue est, ut rhoncus nisi augue at nisi. Vivamus 
a odio eros. Donec sit amet leo sem. Pellentesque lorem neque, bibendum 
vel dignissim vel, lobortis ac odio. Nullam semper suscipit libero et 
sollicitudin. Aenean metus nunc, venenatis ac sollicitudin quis, blandit 
ut turpis.
</p><p>
Nullam sit amet odio nisi, eget pretium nisl. Aliquam hendrerit risus ut 
turpis hendrerit malesuada. Proin bibendum, ligula in tristique malesuada, 
diam urna dapibus leo, eu tincidunt felis felis sit amet massa. Aliquam 
rutrum scelerisque ante nec hendrerit. Nunc sodales felis sit amet tortor 
tincidunt varius. Maecenas convallis molestie ullamcorper. Aenean 
ultricies augue risus, vitae suscipit leo. Sed facilisis, urna id 
tristique egestas, turpis neque varius magna, et mollis mauris libero 
egestas turpis. Aliquam semper elit ac ante tempor varius. Proin molestie, 
neque nec congue tempus, ipsum justo ultricies turpis, id euismod risus 
nisl quis tellus.
</p>
</div>
</div>

</body>
</html>

coothead

tpeck · 10-28-2011, 03:04 PM

Works great! So that's how it's done. Thanks...

coothead · 10-28-2011, 03:21 PM

No problem cobber, you're very welcome.