0

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.

2
  • Can you post an image of what is happening now?
    – alex
    Dec 2, 2010 at 0:55
  • Yes, look at dev.acci.com/screenshot2.jpg. Notice how the image drops below all the text and positions itself next to the #bottom_leftsidebar div. How can I get the image in the top left corner of the #page_content div and wrap the text at the same time?
    – bwelch
    Dec 2, 2010 at 15:49

1 Answer 1

0

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>
2
  • Putting the two sidebars inside the #page_content div breaks my layout of having the two sidebars stacked on the left on the page content on the right. Also, putting the image inside the <p> element does not work as well. Image still positions itself below all of the content text.
    – bwelch
    Dec 2, 2010 at 16:04
  • What about doing a page_container div? So you'll have your sidebars stacked to the left, and your main content floated right - all contained in a container, with a clearfix div at the bottom? Dec 2, 2010 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.