/    Sign up×
Community /Pin to ProfileBookmark

Prevent div overlapping text

Copy linkTweet thisAlerts:
Feb 01.2009

Hi all
Please could someone take a look at the attached image and tell me how I can get the <h2> text to appear after outerDiv instead of following NestedRightDiv. This is driving me a bit nuts. : )

.outerDiv {
width:634px;
height :325px;
position:relative;
color:#000000;
text-align:left;
}

.nestedRightDiv {
background-color:#FFFFFF;
width:224px;
height :325px;
position:absolute;
top:0px;
left:420px;
}

.nestedLeftDiv {
background-color:#FFFFFF;
width:400px;
position:absolute;
top:0px;
left:0px;
}

Thanks very much, Steve

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangFeb 01.2009 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
&lt;/script&gt;

&lt;style type="text/css"&gt;
div {border:1px solid #999;}
#columnDiv, #h2Text {
width:634px;
}
#outerDiv {
overflow:hidden;
width:634px;
height :325px;
}

#nestedRightDiv {
float:left;
background-color:#FFFFFF;
width:224px;
height :325px;
margin:1px;
}

#nestedLeftDiv {
float:left;
background-color:#FFFFFF;
width:400px;
margin:1px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="columnDiv"&gt;Mirum est notare quam littera gothica.&lt;/div&gt;
&lt;div id="outerDiv"&gt;
&lt;div id="nestedLeftDiv"&gt;Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.&lt;/div&gt;
&lt;div id="nestedRightDiv"&gt;Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.&lt;/div&gt;
&lt;/div&gt;
&lt;div id="h2Text"&gt;Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@sjk1000authorFeb 01.2009 — Thanks fang... but, that's how the divs are set up.

I've played around now with the height setting of the outerdiv. If I increase it to 420px then the text slides down to +/- the correct location. Unfortunately the contents are dynamic so this isn't a workable solution.

I've tried height:100%, I've removed the reference to heights in the other classes, added <br class="clearBoth" /> to the end of outerdiv to force a line break before the next div, and tried display:block as a longshot. No joy though. Any suggestions?

.outerDiv {

width:634px;

height: 100%;

display:block;

position:relative;

color:#000000;

text-align:left;

}

.nestedDivLeft {

background-color:#FFFFFF;

width:400px;

position:absolute;

top:0px;

left:0px;

}

.nestedDivRight {

background-color:#FFFFFF;

width:224px;

position:absolute;

top:0px;

left:420px;

}
Copy linkTweet thisAlerts:
@FangFeb 01.2009 — The outerDiv does not know the height of the absolute positioned div's.

if you can't change the css, then you will have to use JavaScript.
Copy linkTweet thisAlerts:
@sjk1000authorFeb 01.2009 — mmmm... I've never done it before but I'm guessing that involves getting the max height of the other two divs and using it to set the height of outerdiv when the page loads. Is that right... or close?
Copy linkTweet thisAlerts:
@Eye_for_VideoFeb 01.2009 — Set outerDiv height to 100&#37; sets height as needed, for whichever column is taller. Get rid of the absolute positiong and just float the right and left div.

Clear floats as needed. Text in <div> with width at 100%, plus a little padding.

Works fine in my tests.

EfV
Copy linkTweet thisAlerts:
@FangFeb 01.2009 — mmmm... I've never done it before but I'm guessing that involves getting the max height of the other two divs and using it to set the height of outerdiv when the page loads. Is that right... or close?[/QUOTE]Basically, yes, but changing the css would solve the problem.
Copy linkTweet thisAlerts:
@sjk1000authorFeb 01.2009 — Thanks both for your replies. EFV that worked perfectly.

For those that are interested I've posted the CSS below.

.outerDiv {

width:634px;

height: 100%;

position:relative;

color:#000000;

text-align:left;

}

.nestedDivLeft {

background-color:#FFFFFF;

width:400px;

float: left;

top:0px;

left:0px;

}

.nestedDivRight {

background-color:#FFFFFF;

width:224px;

float:right;

top:0px;

left:420px;

}

Also, for clarity, Fang, in your amended code below I assume id= should be replaced with class=. Correct me if I'm wrong.

Thanks again, Steve
×

Success!

Help @sjk1000 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.28,
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,
)...