Forum Moderators: not2easy
I was wondering if someone could help me out with this problem. I am trying to get my <P> heading to margin in a small bit from the div, say 10px. When i run it on a browser the tag renders 10px from the side of the page and not 10px from the side of the div tag. It renders properly then when the browser is minimised in. Here is my css code.
The introduction div is inside in the content div like so.
<div id="Content">
<div id="Introduction">
<p>Welcome to ACP Web Design</p>
</div>
</div>
#Content
{
clear : both;
height : 484px;
width : 850px;
margin : 0 auto;
background : #fff url(images/background_grey2.jpg) no-repeat center center;
text-align: left;
font-family: Arial;
font-size: medium;
color: #1C1C1C;
}
#Introduction {
Position:absolute;
width : 510px;
height: 290px;
padding : 0;
margin : 10px 0 0 10px;
display : inline;
top: 190px;
left: 42px;
right: 371px;
#Introduction P
{
font-size:x-large;
margin-left:10px;
font:Arial;
color : #f69214;
}
Thanks in advance - Joe
and a warm welcome to these forums. ;)
Your problems are caused by your use of position:absolute, which is rarely required for page layout.
Here is your reworked code, just adjust the margin values to suit your requirements.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css"><title></title>
<style type="text/css">
#Content{
height:482px;
width:848px;
padding:1px;
margin:0 auto;
background:#fff url(images/background_grey2.jpg) no-repeat center center;
font-family:arial,sans-serif;
font-size:medium;
color:#1c1c1c;
}#Introduction {
width:510px;
height:290px;
margin:190px 0 0 42px;
}#Introduction p {
margin:0 0 0 10px;
font-size:x-large;
color:#f69214;
}
</style></head>
<body><div id="Content">
<div id="Introduction">
<p>Welcome to ACP Web Design</p>
</div>
</div>
</body>
</html>
