Make my div wrap around another div?

Question

div.sidebar {
  float: left;
  margin-left: 35px;
  margin-top: 20px;
  margin-bottom: 5px;
  width: 350px;
  padding: 20px;
  background-color: #667A56;
  border-style: solid;
  border-radius: 3px;
  border-color: #47553C;
  border-width: 5px;
  clear: left;
}
img.side {
  border-style: solid;
  border-color: black;
  border-width: 1px;
  width: 350px;
  margin-top: 5px;
}
div.content {
  margin-top: 30px;
  margin-left: 465px;
  margin-right: 35px;
  background-color: #667A56;
  border-style: solid;
  border-radius: 3px;
  border-color: #47553C;
  border-width: 5px;
  padding: 20px;
  padding-bottom: 10px;
}

<!---Sidebar--->
<div class=sidebar>

  <h2>
Header
</h2>


  <ul>

    links

  </ul>

</div>



<div class=sidebar>

  <h2>
Header
</h2>
  <img class=side>an image

</div>

<!--- Main Content --->

<div class=content>

  <h2 class=contentheader> 
header
</h2>

  <p class=content>
    contenttext
  </p>

  <p class=content>
    contenttext
  </p>
</div>

<div class=content>

  <h2 class=contentheader>
header
</h2>

  <p class=content>
    content text
  </p>

  <p class=content>
    content text
  </p>


</div>

So, this is my website.

I have a header and footer and all that, but that isn't particularly important. I just want to figure out how to get the second content div to wrap around the bottom sidebar, so life is easier for me when I make later pages.

If the site's coding is needed, I can provide that too. Thanks!

Answer 1

Would it be OK for you to do it like this: ?

Note, that it is impossible to get an Element have such are border as in the sketch, you would have to use multiply Elements doing the trick.

.sidebar {
  padding: 50px 100px;
  border: 1px solid black;
}

<div style="float: left; width: 40%">
  <div class="sidebar">sidebar</div>
  <div class="sidebar">sidebar</div>
</div>
<div style="float: left; width: 59%; border: 1px solid black; height: 200px;">Main Content Bar Thing</div>

<div style="display: inline;">asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd asd </div>