Prevent div overlapping text [Archive]

Click to See Complete Forum and Search --> : Prevent div overlapping text

sjk1000

02-01-2009, 10:37 AM

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

Fang

02-01-2009, 11:10 AM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script type="text/javascript">
</script>

<style type="text/css">
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;
}
</style>
</head>
<body>
<div id="columnDiv">Mirum est notare quam littera gothica.</div>
<div id="outerDiv">
<div id="nestedLeftDiv">Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.</div>
<div id="nestedRightDiv">Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</div>
</div>
<div id="h2Text">Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum.</div>
</body>
</html>

sjk1000

02-01-2009, 12:47 PM

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;
}

Fang

02-01-2009, 01:01 PM

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.

sjk1000

02-01-2009, 01:45 PM

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?

Eye for Video

02-01-2009, 01:57 PM

Set outerDiv height to 100% 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

Fang

02-01-2009, 02:00 PM

sjk1000

02-01-2009, 02:41 PM

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