CSS wrapping text around image in non-floated div container

Question

Here's my scenario. #main_content div contains a #nav_leftsidebar div (floated left) for navigation links, #bottom_leftsidebar div (floated left) stacked below #nav_leftsidebar (by clearing float left) for other info/links, and a #page_content div (no float) to the right of both the #nav_leftsidebar div and #bottom_leftsidebar div.

I am trying to wrap the text around the image in the top left corner of the page_content div, but when I float: left the image, the image drops below my text and aligns left of the #bottom_leftsidebar div.

 #main_container { width: 983px; margin: 0 auto; padding: 5px 0 0 0; } #nav_leftsidebar { float: left; width: 250px; padding: 5px 10px 0 0; margin: 5px 0 0 0; border-right-style: solid; border-right-width: 1px; border-right-color: #C0C0C0; } #bottom_leftsidebar { float: left; clear: left; width: 250px; padding: 5px 10px 0 0; border-right-style: solid; border-right-width: 1px; border-right-color: #C0C0C0; } #page_content { position: relative; width: 950px; margin: 5px 0 0 10px; left: 10px; } 

 <div id="nav_leftsidebar"> <ul class="nav_sidebar"> <li> Items ... </li> </ul> </div> <div id="bottom_leftsidebar" style="height: 200px"> bottom_leftsidebar div </div> <div id="page_content"> <h1>Network Design</h1> <img id="Img1" alt="" src="~/images/it_networkdesign.jpg" style="float: left; margin: 0px 5px 5px 0px" runat="server" /> <p> Content ... </p> </div> 

How can I position the image in the top left corner of the #page_content div and wrap the text around the right & bottom sides of the image as well?

Any help or direction would be greatly appreciated.

Answer 1

Wrap the two sidebars inside the "page content" div. Also consider placing the image inside the <p> tag. Here's what I mean:

<div id="page_content">    

<div id="nav_leftsidebar">
        <ul class="nav_sidebar">
            <li> Items ... </li>
        </ul>
    </div>

    <div id="bottom_leftsidebar" style="height: 200px">
        bottom_leftsidebar div
    </div>


        <h1>Network Design</h1>
        <p><img id="Img1" alt="" src="~/images/it_networkdesign.jpg" style="float: left; margin: 0px 5px 5px 0px" runat="server" />

            Content ...
            </p>

</div>