Problem with wraping text in Nested DIVs.

[langoo]

Hi Folks,

I am trying to implement a liquid layout, in which there is text inside a nested DIV.

The parent DIV changes width according to the browser size.
I want my text inside the child DIV to wraparound, when it “hits” the edge of the parent DIV… when resizing.

However for some reason, my Child DIV is not limited to the size of it’s parent and it overflows past the parent DIV… Therefore it does not wraparound when the parent DIV is resized… Eventually it wraps around when the Child DIV hits the edge of the browser.
How can I limit the width of my child div to the width of the parent DIV…

(The reson I am using a nested DIV is because I need my text to be offset from the top by 80px and left 200px, because of a graphic)

This is the markup for the nested Divs

<div style="height: 150px; width: 80%;">
<div style="position: relative;text-align: left; top: 80px; left: 200px;">
Text that needs to wraparond when the parent DIV get narrower!
</div>
</div>


Thanks for any help,
- Joel

 

[Vragabond]

You can easily accomplish offset via padding on the actual div. There's absolutely no need for a nested div in this scenario.

And the problem you're experiencing comes from the displaced content of the inner div (position relative used together with left/right, top/bottom positioning). You would again get much better results if you would've used margins or padding to shift your text.

The way displaced content works is that it still occupies the same amount of space, but is shifted to the position you requested. That means that the width of your inner element is 80% (the width of its container) and 200px.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]