带文字换行的流体浮动div

Question

I have a container with 2 divs floated side by side.

The first div does not have a fixed width applied while the second does. What I want is for the first div to expand full width when the 2nd div is not rendered.

However the issue I face is that when a paragraph in div 1 gets to long it does not wrap as it should and instead ends up wioth div1 wrapping under div2. What I am looking to achieve is for the long paragraph to wrap in div 1 and respect the floated div 2.

Code below may explain better....

<div style="width:600px; height: 600px; margin-left: auto; margin-right: auto; border:1px solid blue;">
        <div style="float:left; border:1px solid green;">
            <p>Main long text jhjkhjkhjkhjk hj hjkh jkh jkh jkh jkh jkh jk hjk h jkh jh jkh jkh jkh jk hjk hjk hjkhkjhjkhjkhjkhjkhjkhjkhjkhjkhjkhjkh</p>
        </div>
        <div style="float:right; border:1px solid red; width: 200px;">
            <p>Secondary</p>
        </div>

thanks in advance

Answer 1

add width to first inner div

<div style="width:600px; height: 600px; margin-left: auto; margin-right: auto; border:1px solid blue;">
        <div style="float:left; border:1px solid green; width: 396px;">
            <p>Main long text jhjkhjkhjkhjk hj hjkh jkh jkh jkh jkh jkh jk hjk h jkh jh jkh jkh jkh jk hjk hjk hjkhkjhjkhjkhjkhjkhjkhjkhjkhjkhjkhjkh</p>
        </div>
        <div style="float:right; border:1px solid red; width: 200px;">
            <p>Secondary</p>
        </div>