A Case: a div is inside div.
When child div that contains some text and is made float to left using CSS3 float property, the parent div's height becomes zero.
what is the cause of this and any solution?
Note: the div's sizes are in percentage(%).
Floating an element takes it out of the normal flow of elements with one of yhe side effects being that it will no longer influence the dinensions of its parent element.
The easiest way to clear a float is to set the parent's overflow property to hidden.
However, this may be undesirable as you could have elements nested in the parent that you need to overflow it. In that case, use the :after pseudo element to clear the floated element.
.parent:after{
clear:both;
content:"";
display:block;
height:0;
}
A third solution is to simply give a sibling following the floated element the clear property but that one obviously depends on your layout and markup.
Incidentally, float is not a CSS3 property, it's been around for a while.
Related
I have a couple of divs that the content needs to be vertically aligned.
On my parent element I have display: table and on the children elements I have display: table-cell; vertical-align: middle;.
From what I read this should have been sufficient. For safe measure in my CSS I added heights to my elements to make sure they are both the same height as the parent element and I also added the image dimensions in the CSS to keep them the size they should be in case of failure to load.
I made a JSFiddle of my code.
My HTML and CSS are both in the fiddle.
I figured it was easier to give a working example.
From https://developer.mozilla.org/en-US/docs/Web/CSS/float
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
Since you put it in a float, it is taken out of the normal flow
Setting display: table-cell makes the element act like a <td> element
When I first learned HTML, I was told that if you want to float 2 divs side by side using float:left, you must set a width on those two elements. This is because a div, by default, is a block element, which will take up the full width it has available to it.
As I've built various projects, I have come across cases where floating did not work without setting a width, but then in other cases, it seems a width is not needed, and the float itself will restrict the elements width.
For example, the following fiddle shows two elements floating side by side only using the float property, no width was required.
<style>
.left{
background-color:yellow;
float:left;
}
.right{
background-color:green;
float:left;
}
</style>
<div class="left">
Floating left
</div>
<div class="right">
Floating left
</div>
However, in other similar scenarios that I can't seem to reproduce right now, applying the float property to two divs does not allow them to float side by side unless a width is a set for both.
Am I losing my mind or is there some scenarios for which this behavior varies?
When set float:left or float:right on an element, it forces the creation of a new block formatting context, and it behaves similarly to inline block level, the width and height are dynamic (determined by the content).
... a block element, which will take up the full width it has available to
it.
A non-replaced block element in normal flow will take up the full width it has available to it. This requirement is stated at http://www.w3.org/TR/CSS2/visudet.html#blockwidth
A floated element is not in normal flow, so that rule does not apply. Instead, float widths are determined according to their own rules, stated and described at http://www.w3.org/TR/CSS2/visudet.html#float-width. This says that when a floated element has a computed width of "auto", its used width is determined using the shrink-to-fit algorithm.
Note that the shrink-to-fit algorithm is also used for other types of layout, including non-replaced inline-block elements and table cells, but in other respects, such as vertical alignment, the layout behaviour of those elements is quite different from that of floats.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.
When I remove the display:block from a p inside a div, it ignores the top-margin or it's own hight or something like that. It snuggles up right next to the element above it. Does anyone know why?
The div is floated, the element above is not.
Inline elements simply don't take vertical margins or height into account. Block elements do.
Edit:
In response to comments, it looks like there are two issues at play here.
You have two elements with id='generals'. Change this to class='generals'.
Add overflow: hidden to your generals style. All of the elements inside it are floated, and so don't apply to the height of the element. Adding overflow: hidden changes how the element is displayed, clearing all the floats inside it.
I am using firebug to debug, one useful feature of firebug is when I click the element in HTML, firebug will show highlight on the actual browser window so that I know which part is currently selected.
But I noticed, with some css, below code is interesting:
<div>
<div>
</div>
</div>
The parent divs highlight area didn't cover the child div's highlight area. In my opinion, the child divs area should be a subset of parent's, is it right? In which cases that that is not true?
There are some cases:
If the child uses position: relative; top: 200px and move away from the parent.
If the child does something similar using a negative margin. (similar to 1)
If the child is a float, and there is no clearing or some kind of clearfix, such as the newest method of making the parent overflow: auto, then the parent will not enclose the floated child.
It is mostly likely because the child divs are floated. In this case you need to use a clearfix hack, or add an additional div into the container like so:
<div style="clear: both"></div>
It depends upon the style being applied. Generally what you are saying holds good. But positioning of a child element can be made independent of the parent.
You may please show the css to get clear idea.
If the inner element is floating or positioned absolutely, it won't affect the size of the parent.
If the inner element is floating you can change the overflow setting of the outer element to make it contain the child. You can specify overflow:hidden; for the parent element, but no size, which has the side effect that it will be sized to contain it's children.