Hey guys, a little help wrapping around a div

HTML & CSS
1

Hey guys, could you have a look at http://www.mikemcdonald2010.com/?page_id=23

I’ve been messing with this for a few hours now and just can’t figure it out, I’d really appreciate some input

On this page, my uncles campaign site that I’m building for him, there is a white box that says “connect with mike” and “donate funds” - this is the sidebar div.

What I’m trying to do is a two column layout, where it appears just as it does now, except, the stuff that’s on this page (contained within div “content”), the pictures, etc, “wrap” around the image.

Essentially, In my head what I’m trying to do is make the “content” div be 926px wide, inside the container div, with the “sidebar” div in the upper righthand corner so that content automatically wraps around the sidebar image.

I think how I do this is to have the “sidebar” div inside of the “content” div, positioned in the upper right hand corner, so that the contents of the “content” div butt up next to, and then wrap around, the sidebar div.

I hope I’m explaining this clearly - Currently, the “content” div is 626px wide (by usuing div “leftboxsidebarfix” as a bit of a hack), which is only 2/3 of the page, and once it extends past the sidebar div, it doesn’t wrap around the image to include the full 926px of usuable width - I’m trying to make it do that.

Any help/advice is greatly appreciated.

2

Mark, thank you for your response. I tried adding that, but to no avail. The Txt loads below it, or above it, even though the sidebar is within the same div as the txt. See the attached picture…

This seems like such a simple problem, but I can’t seem to fix it…

3

Don’t set a width on the content you want to wrap around the image. In IE that will cause it to drop below most likely and other browsers will not be able to fit the image inside the element.

If you want the text to stay at the side then just set a right margin but no width. Remember floats are removed from the flow so the right margin on the text content would be from the containers edge as though the float wasn’t there.

Don’t float the leftside if you want it to wrap the sidebar but the html for the sidebar will need to be first in the html as only following content will wrap a float.

I’m not quite sure what you want to happen exactly but f you want two columns then float both columns with appropriate widths.

If you want the sidebar floated and the left text content to wrap then only float the sidebar but move it up the html and in front of the content you want to wrap.

4

Glad you got it sorted out :slight_smile:

Were you able to do away with the #container div too ?

5

Rayzur,

Thankyou. That fixed it completely. I didn’t notice the clear:both; it just didn’t click.

Guys, I really appreciate it, this forum has an amazing community that I one day hope I can contribute to!

Thanks again, problem solved.

6

I would also remove that #container div completely, it’s not doing anything that your unstyled Content div can’t do.

You just have a bunch of nested divs that are complicating things. Not sure what is actually needed though but try this along with what I mentioned above.

[COLOR=Red]#container[/COLOR] { /*Completely Remove from CSS and HTML*/
float:left;
margin:0 -240px 0 0;
width:100%;
}

Floated sidebar is nested in Content so contain it there with overflow and give it a width for IE haslayout.

[B]#content[/B] {
[COLOR=Blue]width:940px;
overflow:hidden;
margin-bottom:36px;[/COLOR]
}
7

Hi,

The problem is that you have set clear:both on your h1 and the text div right after it.
Remove the clear:both and they will not drop below the floated sidebar.

<h1 class="entry-title">EVENTS</h1>

style.css (line 32)


h1, h2, h3, h4, h5, h6 {
[COLOR=Red]clear:both;[/COLOR]
font-weight:normal;
}

<div class="entry-content">

style.css (line 657)


.entry-content, .entry-summary {
[COLOR=Red]clear:both;[/COLOR]
padding:12px 0 0;
}
8

Paul, thank you so much for trying to help, I really appreciate it.

In an effort to help you figure out what I’m trying to do, and what my issue is, I’ve uploaded the local version of the site I’m working on to: http://www.strategicprecision.com/?page_id=23 so that you can see what I’ve got as of right now.

That is exactly what I have locally, would you mind taking a look and seeing if you can tell what I’m doing wrong exactly? I think you understand what I’m going after. The text you see there, on the link above, is loading below the sidebar image, I’d like for it to load to the side of it, and then once it passes the sidebar and goes under it, to wrap around the sidebar so as to use the full width available on that page. I tried doing what you suggested but it didn’t work, I assume I’m still missing something or doing it wrong.

Thanks so much!

9

Looks like you fixed it as the text is alongside in Firefox and IE now.

10

Paul,

I’ve actually not fixed it. I’m working on it locally, the version online, if you notice the “leftboxsidebarfix” div, is set at 626px because if I make it any larger it will push the sidebar down, as online the sidebar isn’t inside of the content div - that’s what I’m trying to do, but when I do I end up with something like the screenshot above

:frowning: so frustraiting, and should be so simple

11

Hi Travis,

I think I understand what you are after.
All that is needed is for the float to be first in the markup :slight_smile:
Inline content will naturally wrap around a floated block.


<div id="connect-widget-thingy" style="float:right; margin: 0 0 20px 20px"></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lorem dolor, ullamcorper vel laoreet quis, placerat sed tortor. Ut aliquam consequat molestie. Sed eget eros vitae lacus scelerisque venenatis. Donec convallis enim et nunc congue vel ullamcorper leo placerat. Sed interdum placerat justo, quis pharetra magna congue eu. Sed sollicitudin lacus vitae quam tincidunt in auctor tortor gravida. Duis imperdiet consectetur purus in porta. Donec bibendum velit sed dolor tempus quis faucibus ligula pharetra. Donec sit amet risus nunc. Phasellus bibendum, augue sit amet luctus dignissim, dui massa semper ipsum, vitae faucibus ipsum sapien mattis eros. Maecenas fermentum sem non ligula imperdiet hendrerit. Nullam euismod, libero auctor aliquet viverra, enim tellus mollis neque, ut sollicitudin nibh ipsum vitae enim. Morbi vitae neque nulla. Nam convallis convallis arcu, id viverra massa egestas nec. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum posuere erat ac nulla interdum rhoncus. Donec placerat felis eget diam dapibus dignissim. Donec dui ipsum, vehicula et ornare a, venenatis eget quam. Nulla placerat aliquam tempor.</p>
<p>Aliquam pretium consectetur lobortis. Praesent sem tortor, dignissim vitae vestibulum et, facilisis volutpat nisi. Vivamus et velit vitae justo tempor tempor ac at quam. Cras sit amet lacus risus. Nunc ultrices dignissim nisl sit amet consectetur. Ut eget cursus nisi. Suspendisse pretium ornare risus sit amet viverra. Ut vestibulum, elit in ornare venenatis, dui est sagittis erat, sit amet rhoncus leo neque et justo. Nulla facilisi. Proin gravida hendrerit turpis, vitae porttitor est euismod sit amet. Suspendisse eu justo ac nibh faucibus lobortis. Aenean semper, nisl a feugiat pellentesque, nibh dui faucibus velit, vel rutrum felis nibh nec quam. Quisque pretium nisi quis arcu egestas et adipiscing sem ullamcorper. Proin libero neque, suscipit sit amet porttitor vel, vulputate eget urna. Cras in vestibulum nulla. Nam convallis eleifend malesuada. Nunc hendrerit tempus sodales. </p>
</div>

Hope it helps :slight_smile: