ansaurus

Question

Why does my second div go outside of the first div?

Answer 1

+1 A:

Since you’ve used float, that container has zero height as far as the parent container is concerned. To change that, put an extra dummy tag just before the end of the parent div:

<div style="clear: both;"> </div>

Konrad Rudolph 2009-11-01 21:06:35

Hi Konrad. Thanks for the help. I put your span tag just before the closing parent div but still nothing. The parent div will not expand. Also, I want to write good CSS so yes, I'm interested in knowing this. Thanks. Should I take the floats away? Where would I use display block? In the span tags?

Jim 2009-11-01 21:10:14

or try adding overflow:auto on the parent div.

Galen 2009-11-01 21:15:48

Ignore the `block` part, it was wrong. Sorry. And I’ve corrected my posting now. `<span>` of course won’t work because it doesn’t create a box. `<div>`, on the other hand, does.

Konrad Rudolph 2009-11-01 21:17:31

@Galan: `overflow: auto` isn’t a good solution here, it creates a scroll bar in my browser (due to the inner boxes’ borders). `overflow: visible` doesn’t work at all. But you’re right, in other contexts this is a good solution.

Konrad Rudolph 2009-11-01 21:19:58

Thanks Galen, the overflow worked. Which is the right way to do this though? I added clear:both as Konrad suggested and I didn't get anything. After I added the overflow attribute, it worked so I then removed clear: both and it still expands. Do I need the clear:both? Also, I added display:block to both of my span tags. Do I need these too?

Jim 2009-11-01 21:20:04

Konrad, I think it is working properly now. I will update my OP. Please have a look at my changes.

Jim 2009-11-01 21:23:29

overflow:auto works, just depending on the situation it can add scroll bars and not look so good. adding a div that clears will always work, i just hate extra markup so i use overflow auto when possible.

Galen 2009-11-01 21:25:32

I looked at the clear attribute and honestly don't understand its purpose. Can someone please tell me what it does?

Jim 2009-11-01 21:26:53

@Jim: `clear` simply cancels the effect of previous `float` definitions on the element it’s applied to and all following elements. That way, the `div` in my code is put *below* the floated `div`s. But since it’s below them, the parent container now has to expand to encompass it.

Konrad Rudolph 2009-11-01 21:53:41

Konrad, thanks for the explanation on the clear attribute. Michael pointed me to a quirksmode document that recommends the overflow value and states that using clear is outdated. Since I'm always looking for the best practice across all browsers, which, in your opinion is better and easier to implement?

Jim 2009-11-01 21:58:00

@Jim: as I’ve already said in a comment before, the quirksmode way is superior to mine. I just posted it here because I mistakenly thought that the `overflow` solution wouldn’t work in this particular context. I could delete my answer but then this whole nice discussion would also be deleted, which I want to prevent.

Konrad Rudolph 2009-11-01 22:19:26

Answer 2

+2 A:

I would add the following styles to the div that contains the floating divs:

overflow: hidden;
zoom: 1;

The overflow setting ensures it fully wraps its floating child divs and the zoom setting is for IE browsers, to kick them into "hasLayout" mode. Using special empty divs with clear:both is a rather ugly, dated way of ensuring you have the correct layout.

There is an excellent article on the subject here: http://www.quirksmode.org/css/clearing.html although the article uses width: 100% to achieve the same end.

DavidWinterbottom 2009-11-01 21:36:18

Hi David, thank you very much for the link. Let me ask you a question. There are actually 3 divs in my markup. Would I need to add overflow to all three divs or only the parent?

Jim 2009-11-01 21:46:26

Thanks again for the link David. It is a fantastic read!

Jim 2009-11-01 21:49:36

@Jim: you should accept this answer instead of mine. It’s better.

Konrad Rudolph 2009-11-01 21:51:33

There you go. I am seeing that from the quirksmode article as well.

Jim 2009-11-01 21:53:23

Is it imperative to have a 100% declaration for the container? I am using 90% and doing margin auto because I am using this parent div on top of a rounded corners box.

Jim 2009-11-01 21:54:44

ansaurus

tags:

views:

answers:

Why does my second div go outside of the first div?

related questions