...

View Full Version : padded border within a div



tpeck
10-28-2011, 01: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


<!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">xxxxxxxxxxxxxxxxxxxuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu uuuuuuuuxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxuuudb</font>
</div>
</div>

</body>

</html>

coothead
10-28-2011, 02:11 PM
Hi there tpeck,

try it like this...


<!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, 04:04 PM
Works great! So that's how it's done. Thanks...

coothead
10-28-2011, 04:21 PM
No problem cobber, you're very welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum