Right, so clearing the

greg — Wed, 15 Oct 2008 13:54:42 +0000

Right, so clearing the floats with a div within the parent should sort the issue.

It's a good fix, thanks for that.

Although, still a little illogical imo. Anything inside a div should remain in there, and after the parent's </div> any other divs shouldn't be floated, aligned or anything else at all from the properties of the inner divs as they are contained inside a container.

Ok I get what you mean, look

demonhale — Tue, 07 Oct 2008 13:41:42 +0000

Ok I get what you mean, look at my example below to help you fix what you want your property to look like. You just need to clear div elements. However clearing an existing div element for the purpose of inline displays is a little tricky so you need at least to declare clearing properties to clear elements. This will work for what you want...

<html>
<head>
<title>test</title>
<style media="all" type="text/css">
#my_div{
margin: 10px;
background:#c00000;


}

#float_div_A{
margin: 10px;
width: 200px;
float: left;
background:#808080;

}

#float_div_B{
margin: 10px;
width: 200px;
float: right;
background:#e0e0e0;

}
.fixfloat:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.fixfloat {display: inline-block;}  /* for IE/Mac */
    
<!--[if IE]>
<style type="text/css">
  .fixfloat {
    zoom: 1;
    display: block;
    }  
</style>
<![endif]-->
</style>
</head>
<body>
<div id="my_div">
  <div id="float_div_A">COLUMN ONE wewewe we we we we we </div>
  <div id="float_div_B">COLUMN TWO wewe we wewe we we we </div>
  <div class="fixfloat"></div>
</div>
</body>
</html>

demonhale wrote: No

greg — Tue, 07 Oct 2008 12:09:00 +0000

demonhale wrote:

No properties for the parent div makes it appear pushed down beneath the parent since your two inner floated div's in the example has a 10px margin. So it would appear beneath when it is actually just pushed 10px down since there is no property for it's wrapper.

I understand what you say, but not only is it an illogical way for it to work, but it's also only true without content inside it to give that parent div a height. It is also seemingly ture when using floated inner divs, and is my confusion,

If you have a parent div without height or anything else, but place an inner div inside it and the inner div has text, it WILL go inside the parent and stretch the parent's height to the same as the inner div.

And this is logical. If the parent div is infinite size, i.e. no properties at all, you should be able to put any sized div INSIDE it and that div will stretch the parent as it is wrapped inside the parent's open div and closed div code.

Which is ideal for dynamic content, as setting a height for a parent div is not always possible.

Here's an example of one I did recently that didn't work until I added a height to the parent div, which made it useless for dynamic content...

The CSS

.parent_div{
height: 57px; //ADDED TO MAKE THE INNER DIVS GO INSIDE THIS PARENT
margin: 30px 0px 0px 10px;
background-color: #EFEFC7;
border: 1px solid #CFCF4F;
}
.inner_left_div{
margin: 12px 0px 0px 45px;
float: left;
}
.inner_right_div{
margin: 7px 30px 0px 0px;
float: left;
float: right;
}

The HTML

<?php
<div class="parent_div">
 <div class="inner_left_div">float left</div>
 <div class="inner_right_div">float right div</div>
</div>
?>

If you remove the height for the parent (and no other changes), the two floated divs don't go inside it.
BUT - If you remove the height AND remove the floats for the inner divs (and no other changes), they DO go inside it.
How is that logical? I see it's the float that stops the desired functionality, but if inner divs go inside parent without float, they surely should also go inside with float and float as per their properties STILL within the parent div as boundaries.

There must be a way around this without setting height.

Well I tried that several

demonhale — Tue, 07 Oct 2008 04:28:40 +0000

Well I tried that several times as long as I define a height property the inner div's would always copy the properties of the parent div. It is never advised to float a div inside a parent with no defined attributes.

Floating an element (div's, images etc) will float inside it's wrapper or parent div as long as the parent div has a defined property. No properties for the parent div makes it appear pushed down beneath the parent since your two inner floated div's in the example has a 10px margin. So it would appear beneath when it is actually just pushed 10px down since there is no property for it's wrapper.

Divs if you imagine are like image layers, if you define a bigger property for the inner layers, it will have that property but since it's parent layer has no property, it will just remain hidden but the inner layers are still over it.

demonhale wrote: Actually

greg — Mon, 06 Oct 2008 12:04:47 +0000

demonhale wrote:

Actually the floated div's will fall inside the #my_div and apply the margin properties to the inner floated div's.

You would think... and is why I made this thread, as often I find they don't, and floating the wrapper div usually resolves it.

So I was wondering what makes this happen? Some properties of the inner divs perhaps?

Actually the floated div's

demonhale — Sun, 05 Oct 2008 20:08:09 +0000

Actually the floated div's will fall inside the #my_div and apply the margin properties to the inner floated div's.

Yes it is also good practice to define height and width properties to wrapper div elements, to make it dynamic you can define 100% for these properties and it will adapt to parent wrappers...