CODEWITHSUNDEEP
htmlcss
king
king

Reputation: 1344

Why Do These Divs Overlap?

This makes no sense to me. I've been trying to research this, but I have no idea why it's overlapping. I have a feeling that it is because I used the 'img' tag or because I need to use some kind of position type somewhere, but I have tried them and it didn't work.

http://jsfiddle.net/FhU3r/

#picdiv {
height:405px;
width:320px;
border:1px solid black;
margin:15px;
    float:left;
 }

#rightdiv {
width:620px;
height:320px;
border:1px solid black;

 } ​

<div id="picdiv">
<center><img src="img.png" /></center>
<div id="quote">
"Here's Some Inspirational Text Like OMG!"
</div> <!-- end quote -->
</div> <!-- end pic container -->

<div id="rightdiv">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>​

I updated it, but still can't get it to work : http://jsfiddle.net/FhU3r/15/

Upvotes: 0

Views: 792

Answers (4)

Phil
Phil

Reputation: 889

First of all, note that your borders overlap, but the content does not.

The float property really has two conceptually distinct uses that I know of, even if the technical implementation is identical. The first is getting content to flow around an element, and the second is for putting elements next to each other in a layout. From what I can see, you're looking for the second but implementing the first.

Lets go over the first, making content flow around an element.

Say you are publishing an article. You have many paragraphs of text, plus some images to insert throughout the body. They should "float" on one side, left or right, and the paragraph text should flow around them. And, the box that contains the paragraph text flowing around the image should also contain the image itself. That's what you are seeing in your code.

Example

And then there's the second, where you want to stick things next to each other for layout purposes. That seems to be what you're after.

Well, the accommodation of the first purpose sort of makes using floats for the second purpose a bit ugly. I don't know the history, but if I had to guess, I'd say the float specs were designed around the first purpose.

Basically you just need to float both elements left, with float: left;. The one on the right will then not try to flow around the one on the left, but rather exist in its own vertical column. Even if it's longer than the one on the left, it will just extend its column instead of flowing underneath the one on the left.

Example

One of the ugly aspects of this approach is that you can't just carelessly put something underneath the two columns. If you just throw in another paragraph, it will wrap around both floated elements:

Example

So to fix that, you need to add clear: left to whatever you want to be beneath the two left-floated elements.

Example

For the definitive source on this, check out the W3C specs.

This article also does a pretty great job addressing common issues with floats.

Upvotes: 3

Steve Wortham
Steve Wortham

Reputation: 22220

If I understand what you're trying to do, I'd add float: left to #rightdiv.

This will make the paragraph appear just to the side of the image and caption. Of course, it will wrap to the next line if you don't have enough width in the parent container so that's something to look out for.

Upvotes: 3

Andrew
Andrew

Reputation: 2154

Since you have one floated div and another unfloated div, the floated div is taken out of the normal flow of the document. You can fix this by adding float:right; to the #rightdiv.

If you want one to show up on the left and the other on the right - which, from the ids of your divs, it sounds like you do :) - then you need to manually set the width of them (px, %, em - whatever you need) so that combined they will fit horizontally within the containing element. If the two floated elements can't fit on the same line, the second element gets "bumped" to the second line.

Also, if you have more content that goes below these divs, you will probably want to "clear" the floated elements with something like this:

<br style="clear:both" />

That will ensure that any elements below will not overlap with the floated elements. I hope this helps!

Upvotes: 1

Naddiseo
Naddiseo

Reputation: 1034

Floating a div takes it out of the "flow". So you have kinda "floated" the div ontop of the image. If you float the image it should position how you want.

Upvotes: 0

Related Questions