/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Divs overlapping

Please look at [url]www.ecolibrio.com/new.html[/url] and you’ll see that Layer 1 (red box) has content that overlaps into layer 2 (black box). What i want to do is when i type in content into layer 1 that it pushes down layer 2. Right now, layer 2 just sits there and layer 1’s content is overlapping. I’ve tried clear:left and clear:both on layer 2 but doesn’t work.

also i want the content to stay inside the red box

to post a comment
CSS

2 Comments(s)

Copy linkTweet thisAlerts:
@WebJoelFeb 10.2007 — You don't need to "clear" anything because you did not "float" anything. But you did declare both DIVs as being "position:absolute;". This places them 'outside of the document flow'. This means that they exert no 'pressure' upon any element around them, so the first one cannot 'push the second one down' as it expands.

Here, -try this instead:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Untitled Document</title>

<style type="text/css">

<!--

#Layer1 {

[B]position:relative;[/B]

width:882px;

[B]height:auto;[/B]

padding:10px;

border: 1px solid red;

}

#Layer2 {

[B]position:relative;[/B]

width:200px;

height:115px;

[B]top: 10px;[/B]

padding:10px;

border: 1px black solid;

}

-->

</style>

</head>

<body>

<div id="Layer1">

<p>layer1</p>

<p> text from layer 1</p>

<p>text from layer 1 </p>

<p>overlapping text from layer 1 </p>

<p>overlapping text from layer 1 </p>

<p>overlapping text from layer 1 </p>

<p>overlapping text from layer 1 </p>

overlapping text from layer 1 </div>

<div id="Layer2">layer 2

<p>overlapping text from layer 1 </p>

<p>overlapping text from layer 1 </p>

<p>overlapping text from layer 1 </p>

</div>

</body>

</html>[/QUOTE]
Copy linkTweet thisAlerts:
@checkmodem12authorFeb 10.2007 — Thanks webjoel! just what i needed.
×

Success!

Help @checkmodem12 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 6.2,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...