/    Sign up×
Community /Pin to ProfileBookmark

concerning relative and absolute divs

Here is my code:

[code=html]<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />

<!– Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />

<title>HTML</title>
<meta name=”description” content=”” />
<meta name=”author” content=”asitar” />

<!–<meta name=”viewport” content=”width=device-width; initial-scale=1.0″ />–>

<!– Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references –>
<link rel=”shortcut icon” href=”/favicon.ico” />
<link rel=”apple-touch-icon” href=”/apple-touch-icon.png” />
<style type=”text/css”>
body,html {margin:0 auto; }
div.backgrnd { background-image: url(“main/background_stretched.jpg”); background-attachment:local; background-repeat:no-repeat;margin-left:auto; margin-right:auto;width:1000px;border-style:dashed;width:1000px;overflow:visible;}
div.center {position:absolute; left:200px; right:200px; height:auto; border-style:dashed;}
div.left {position: relative; left: 20px;}
div.right {position: relative; left:620px; right:20px; border-style:dashed;}
</style>
</head>

<body>
<!–<table style=”height:100%;width:100%;”>
<tr>
<td align=”center”>–>
<div class=”backgrnd”>
<div class=”left”>
1
</div>
<div class=”center”>
<div align=”center”>
<img align=”middle” src=”model.jpg” />
</div>
<p>test</p>
</div>
<div class=”right”>
2
</div>
<!–<header>
<h1>HTML</h1>
</header>
<nav>
<p>
<a href=”/”>Home</a>
</p>
<p>
<a href=”/contact”>Contact</a>
</p>
</nav>

<div>

</div>

<footer>
<p>
&copy; Copyright by asitar
</p>
</footer>
–>
</div>

<!–</td>
</tr>
</table>–>
</body>
</html>[/code]

will the “right” parameter of absolute div be related to screen width or parent div? why borders of child absolute div is not included into parent div?

to post a comment
HTML

1 Comments(s)

Copy linkTweet thisAlerts:
@rtretheweyJul 29.2014 — Elements set to absolute positioning are positioned with respect to their parent [i]positioned[/i] element. As written, the "right" div would be positioned with respect to the document <body> since none of it's parent elements have their 'position' property set. If you want to position "right" with respect to "backgrnd", set "backgrnd" to "position:relative;".

Also, elements using 'position:absolute' are removed from the normal document flow so they aren't influenced by the presence of other elements.
×

Success!

Help @Uniunit spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...