Div floats - child and parent
If I have a div
#my_div{
margin: 10px;
}and inside that div I place another two divs, floated left as I want two columns next to each other..
#float_div_A{
margin: 10px;
width: 200px;
float: left;
}#float_div_B{
margin: 10px;
width: 200px;
float: left;
}<div id="my_div">
<div id="float_div_A">COLUMN ONE</div>
<div id="float_div_B">COLUMN TWO</div>
</div>The two floated divs are underneath the #my_div, and not inside it.
Yet floating the #my_div fixes this.
Why would that be when the two other divs are contained in the #my_div with the html?
Maybe this is not always the case, but certainly in my experience this happens. Making the my_div a fixed height also solves this, but is not good for dynamic content.
demonhale posted this at 20:08 — 5th October 2008.
He has: 3,278 posts
Joined: May 2005
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...
greg posted this at 12:04 — 6th October 2008.
He has: 1,581 posts
Joined: Nov 2005
So I was wondering what makes this happen? Some properties of the inner divs perhaps?
demonhale posted this at 04:28 — 7th October 2008.
He has: 3,278 posts
Joined: May 2005
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.
greg posted this at 12:09 — 7th October 2008.
He has: 1,581 posts
Joined: Nov 2005
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.
demonhale posted this at 13:41 — 7th October 2008.
He has: 3,278 posts
Joined: May 2005
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>
greg posted this at 13:54 — 15th October 2008.
He has: 1,581 posts
Joined: Nov 2005
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.Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.