Related
Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or another. (and I know how to align their tops :))
And I know that its overflow:hidden; which is causing it but not sure that why its pushing that div downward.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
</div>
http://jsfiddle.net/WGCyu/.
Basically you have added more clutter in your code which is creating more confusion so first I try to remove clutter which hinders understanding the real issue.
First of all we have to establish that what's the real question?
Its that why "inline-block" element is pushed downward.
Now we start to understand it and remove the clutter first.
1 -
Why not give all three divs same border width?
Let's give it.
2 - Does floating element has any connection with inline-block element being pushed downward?
No, it has nothing to do with it.
So, we have removed that div altogether. And you are witnessing same behavior of inline-block element being pushed downward.
Here comes the turn of some literature to grasp the idea of line boxes and how they are lined in the same line esp read last paragraph carefully because there lies the answer of your question.
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
If you are not sure about baseline then here is brief explanation in simple words.
All characters except 'gjpqy' are written on the baseline you can think of baseline as if you draw a simple horizontal line same as underlining right below these "random characters" then it will be the baseline but now if you write any of 'gjpqy' character(s) on the same line then lower part of these characters would fall below the line.
So, we can say that all characters except 'gjpqy' are written completely above the baseline while some part of these characters are written below the baseline.
3 - Why not check where is the baseline of our line?
I have added few characters which show the baseline of our line.
4 - Why not add some characters in our divs too to find their baselines in the div?
Here, some characters added in divs to clarify baseline.
Now when you understand about baseline, read the following simplified version about baseline of inline-blocks.
i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though).
Then its baseline would be the baseline of the containing block of the line.
ii) If inline-block in question has its overflow property set to OTHER THAN visible.
Then its bottom margin would be on the baseline of the line of containing box.
First point in detail
Now look at this again to clarify your concept that what's happening with green div.
If yet any confusion then here is added more characters close to green div to establish the baseline of the containing block and green div baseline is aligned.
Well, I am now claiming that they have same baseline? RIGHT?
5 - Then why not overlap them and see if they are fit right one on another?
So, I bring third div -left: 35px; to check if they have same baseline now?
Now, we have got our first point proved.
Second point in detail
Well, after explanation of first point second point is easily digestible and you see that first div which has overflow property set to other than visible (hidden) has its bottom margin on the base line of the line.
Now, you can do couple of experiments to further illustrate it.
Set first div overflow:visible (or remove it altogether).
Set second div overflow: other than visible.
Set both divs overflow: other than visible.
Now bring back your clutter and see if everything is looking to fine to you.
Bring back your floated div (of course there is need to
increase some width of body)
You see it has no effect.
Bring back same odd margins.
Set green div to overflow: visible as you set in your question (that misalignment is due to increase of border width from 1px to 5px so if adjust negative left you'll see there is no issue)
Now remove additional characters I added to aid in
understanding. (and of course remove negative left)
Finally reduce body width because we no longer need wider one.
And now we are back to where we started from.
Hopefully I have answered your question.
The default value for vertical-align in CSS is baseline & this rule is also apply with inline-block read this http://www.brunildo.org/test/inline-block.html
Write vertical-align:top in your inline-block DIV.
Check this http://jsfiddle.net/WGCyu/1/
Just use vertical-align:top;
Demo
I originally started on answering this question, but it was locked as dupe before I could finish, so I post the answer here instead.
First, we need to understand what inline-block is.
The definition in MDN says:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
To understand what's going on here, we need to look at vertical-align, and it's default value baseline.
In this illustration you have this color chart:
Blue: The baseline
Red: The top and bottom of the line-height
Green: The top and bottom of the inline content box.
In the #left element, you do have some textual content that controls what is the baseline. This means that the text inside defines the baseline for #left.
In the #right, there is no content, so the browser has no other option than to use the box bottom as the baseline.
Se this visualisation where I have drawn the baseline on an example where the first inline container has some text, and the next is empty:
If you specifically align one element to top, you really say that you align the top of this element to the top of of the line box.
This might be easier to understand by an example.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
vertical-align: baseline;
}
div#middle {
vertical-align: top;
height: 50px
}
div#right {
font-size: 30px;
height: 100px
}
<div id="left">
<span>groovy</span>
</div>
<div id="middle">groovy</div>
<div id="right">groovy</div>
The result is this - and I added the blue baseline, and the red line box:
What happens here, is that the height of line box is depended on how the the content of the entire line is laid out. This means that to calculate the top alignment, the basline alignments must be calculated first. The #middle element has vertical-align:top, so this is not used for the baseline positioning. but the #left and #right are positioned vertically so that their baselines are aligned. When this is done, the height of the line box has increased, because the #right element has been pushed up a bit as a result of the larger font size. Then the top position for the #middle element can be calculated, and this is along the top of the line box.
View this alternative example. The reason for such behavior is described in CSS3 module: line: 3.2. Line Box wrapping [1]:
In general, the start edge of a line box touches the start edge of its containing block and the end edge touches the end edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same inline progression advance (that of the containing block), they may vary if available inline-progression space is reduced due to floats[...]
As you can see, the third element is pushed downward, although it does not have a overflow property. The reason must be somewhere else to find. The second behavior you notice is described in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 9.5 Floats [2]:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
All your display:inline-block; divs are using a special kind of baseline in this case 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties (very end) [3]:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So when you're using floating elements and inline-block elements, the floating element will be pushed to the side and the inline formatting will be recalculated according to 1. On the other hand, the next elements are shortened if they won't fit. Since you're already working with a minimum amount of space, there's no other way to modify your elements then pushing them 2. In this case, the highest element will define the size of your wrapping div, thus defining the baseline 3, while on the other hand the modification of position and width stated in 2 can't be applied to such minimal spaced maximum height elements. In this case a behavior as in my very first demo will result.
Lastly, the reason your overflow:hidden will prevent #firstDiv to be pushed to the lower edge of your #container, although I couldn't find a reason in section 11. Without overflow:hidden it works as excepted and defined by 2 and 3. Demo
TL;DR: Have a very close look on the W3 recommendations and the implementations in the browser. In my humble opinion floating elements are determined to show unexpected behavior if you don't know all the changes they do to your surrounding elements. Here's another demo which shows a common problem with floats.
the problem is because you have applied float:left on the second div. which makes the second div to come on the left side and your first div drops and comes after your second div.
If you apply float:left on the first div also, your problem will be gone.
overflow:hidden is causing no problem to your layout, overflow:hidden affects only inner elements of a div, it has nothing to do with other elements which are outside.
Try adding padding:0; to the body and removing the margin of your divs.
Add background-color:*any color aside from background* to check the difference.
Try making all CSS properties of all Elements same.
I had similar problem and while fixing this I identified that I was dropping an Element with Font property into Div Element.
After dropping that Element with Font property the alignment of all DIV was disturbed. To fix this I set Font property to all DIV elements the same as the element that is dropped into it.
In the following example, the Dropped element of class ".dldCuboidButton" defined with font-size:30 px.
So I added same property to remaining classes i.e. .cuboidRecycle, .liCollect , .dldCollect which are used by DIV elements. In that way all DIV element follow the same Measurments before and after dropping the element into it.
.cuboidRecycle {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.liCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#009933;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCuboidButton {
background-color: #7c6436;
color: white; /* White text */
font-size: 30px; /* Set a font-size */
border-radius: 8px;
margin-top: 1px;
}
Here is the example of HTML dynamically created using above CSS.
$("div#tabs").append(
"<div id='" + newTabId + "'>#" + uniqueId +
"<input type=hidden id=hdn_tmsource_" + uniqueId + " value='" + divTmpfest + "'>" +
"<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" +
"<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)' ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
"<div id='" + divDropLeCuboid + "' class=liCollect ondrop='dropForLinkExport(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
"<div id='" + divDropDwldCuboid + "' class=dldCollect ondrop='dropForTMEntry(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
"</div>"
);
Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or another. (and I know how to align their tops :))
And I know that its overflow:hidden; which is causing it but not sure that why its pushing that div downward.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
</div>
http://jsfiddle.net/WGCyu/.
Basically you have added more clutter in your code which is creating more confusion so first I try to remove clutter which hinders understanding the real issue.
First of all we have to establish that what's the real question?
Its that why "inline-block" element is pushed downward.
Now we start to understand it and remove the clutter first.
1 -
Why not give all three divs same border width?
Let's give it.
2 - Does floating element has any connection with inline-block element being pushed downward?
No, it has nothing to do with it.
So, we have removed that div altogether. And you are witnessing same behavior of inline-block element being pushed downward.
Here comes the turn of some literature to grasp the idea of line boxes and how they are lined in the same line esp read last paragraph carefully because there lies the answer of your question.
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
If you are not sure about baseline then here is brief explanation in simple words.
All characters except 'gjpqy' are written on the baseline you can think of baseline as if you draw a simple horizontal line same as underlining right below these "random characters" then it will be the baseline but now if you write any of 'gjpqy' character(s) on the same line then lower part of these characters would fall below the line.
So, we can say that all characters except 'gjpqy' are written completely above the baseline while some part of these characters are written below the baseline.
3 - Why not check where is the baseline of our line?
I have added few characters which show the baseline of our line.
4 - Why not add some characters in our divs too to find their baselines in the div?
Here, some characters added in divs to clarify baseline.
Now when you understand about baseline, read the following simplified version about baseline of inline-blocks.
i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though).
Then its baseline would be the baseline of the containing block of the line.
ii) If inline-block in question has its overflow property set to OTHER THAN visible.
Then its bottom margin would be on the baseline of the line of containing box.
First point in detail
Now look at this again to clarify your concept that what's happening with green div.
If yet any confusion then here is added more characters close to green div to establish the baseline of the containing block and green div baseline is aligned.
Well, I am now claiming that they have same baseline? RIGHT?
5 - Then why not overlap them and see if they are fit right one on another?
So, I bring third div -left: 35px; to check if they have same baseline now?
Now, we have got our first point proved.
Second point in detail
Well, after explanation of first point second point is easily digestible and you see that first div which has overflow property set to other than visible (hidden) has its bottom margin on the base line of the line.
Now, you can do couple of experiments to further illustrate it.
Set first div overflow:visible (or remove it altogether).
Set second div overflow: other than visible.
Set both divs overflow: other than visible.
Now bring back your clutter and see if everything is looking to fine to you.
Bring back your floated div (of course there is need to
increase some width of body)
You see it has no effect.
Bring back same odd margins.
Set green div to overflow: visible as you set in your question (that misalignment is due to increase of border width from 1px to 5px so if adjust negative left you'll see there is no issue)
Now remove additional characters I added to aid in
understanding. (and of course remove negative left)
Finally reduce body width because we no longer need wider one.
And now we are back to where we started from.
Hopefully I have answered your question.
The default value for vertical-align in CSS is baseline & this rule is also apply with inline-block read this http://www.brunildo.org/test/inline-block.html
Write vertical-align:top in your inline-block DIV.
Check this http://jsfiddle.net/WGCyu/1/
Just use vertical-align:top;
Demo
I originally started on answering this question, but it was locked as dupe before I could finish, so I post the answer here instead.
First, we need to understand what inline-block is.
The definition in MDN says:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
To understand what's going on here, we need to look at vertical-align, and it's default value baseline.
In this illustration you have this color chart:
Blue: The baseline
Red: The top and bottom of the line-height
Green: The top and bottom of the inline content box.
In the #left element, you do have some textual content that controls what is the baseline. This means that the text inside defines the baseline for #left.
In the #right, there is no content, so the browser has no other option than to use the box bottom as the baseline.
Se this visualisation where I have drawn the baseline on an example where the first inline container has some text, and the next is empty:
If you specifically align one element to top, you really say that you align the top of this element to the top of of the line box.
This might be easier to understand by an example.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
vertical-align: baseline;
}
div#middle {
vertical-align: top;
height: 50px
}
div#right {
font-size: 30px;
height: 100px
}
<div id="left">
<span>groovy</span>
</div>
<div id="middle">groovy</div>
<div id="right">groovy</div>
The result is this - and I added the blue baseline, and the red line box:
What happens here, is that the height of line box is depended on how the the content of the entire line is laid out. This means that to calculate the top alignment, the basline alignments must be calculated first. The #middle element has vertical-align:top, so this is not used for the baseline positioning. but the #left and #right are positioned vertically so that their baselines are aligned. When this is done, the height of the line box has increased, because the #right element has been pushed up a bit as a result of the larger font size. Then the top position for the #middle element can be calculated, and this is along the top of the line box.
View this alternative example. The reason for such behavior is described in CSS3 module: line: 3.2. Line Box wrapping [1]:
In general, the start edge of a line box touches the start edge of its containing block and the end edge touches the end edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same inline progression advance (that of the containing block), they may vary if available inline-progression space is reduced due to floats[...]
As you can see, the third element is pushed downward, although it does not have a overflow property. The reason must be somewhere else to find. The second behavior you notice is described in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 9.5 Floats [2]:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
All your display:inline-block; divs are using a special kind of baseline in this case 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties (very end) [3]:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So when you're using floating elements and inline-block elements, the floating element will be pushed to the side and the inline formatting will be recalculated according to 1. On the other hand, the next elements are shortened if they won't fit. Since you're already working with a minimum amount of space, there's no other way to modify your elements then pushing them 2. In this case, the highest element will define the size of your wrapping div, thus defining the baseline 3, while on the other hand the modification of position and width stated in 2 can't be applied to such minimal spaced maximum height elements. In this case a behavior as in my very first demo will result.
Lastly, the reason your overflow:hidden will prevent #firstDiv to be pushed to the lower edge of your #container, although I couldn't find a reason in section 11. Without overflow:hidden it works as excepted and defined by 2 and 3. Demo
TL;DR: Have a very close look on the W3 recommendations and the implementations in the browser. In my humble opinion floating elements are determined to show unexpected behavior if you don't know all the changes they do to your surrounding elements. Here's another demo which shows a common problem with floats.
the problem is because you have applied float:left on the second div. which makes the second div to come on the left side and your first div drops and comes after your second div.
If you apply float:left on the first div also, your problem will be gone.
overflow:hidden is causing no problem to your layout, overflow:hidden affects only inner elements of a div, it has nothing to do with other elements which are outside.
Try adding padding:0; to the body and removing the margin of your divs.
Add background-color:*any color aside from background* to check the difference.
Try making all CSS properties of all Elements same.
I had similar problem and while fixing this I identified that I was dropping an Element with Font property into Div Element.
After dropping that Element with Font property the alignment of all DIV was disturbed. To fix this I set Font property to all DIV elements the same as the element that is dropped into it.
In the following example, the Dropped element of class ".dldCuboidButton" defined with font-size:30 px.
So I added same property to remaining classes i.e. .cuboidRecycle, .liCollect , .dldCollect which are used by DIV elements. In that way all DIV element follow the same Measurments before and after dropping the element into it.
.cuboidRecycle {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.liCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#009933;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCuboidButton {
background-color: #7c6436;
color: white; /* White text */
font-size: 30px; /* Set a font-size */
border-radius: 8px;
margin-top: 1px;
}
Here is the example of HTML dynamically created using above CSS.
$("div#tabs").append(
"<div id='" + newTabId + "'>#" + uniqueId +
"<input type=hidden id=hdn_tmsource_" + uniqueId + " value='" + divTmpfest + "'>" +
"<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" +
"<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)' ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
"<div id='" + divDropLeCuboid + "' class=liCollect ondrop='dropForLinkExport(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
"<div id='" + divDropDwldCuboid + "' class=dldCollect ondrop='dropForTMEntry(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
"</div>"
);
Following is my code and I want to understand that why #firstDiv is being pushed downward by all browsers. I really want to understand the inner workings of the fact that why its being pushed downward rather than pulling it upward by one way or another. (and I know how to align their tops :))
And I know that its overflow:hidden; which is causing it but not sure that why its pushing that div downward.
body {
width: 350px;
margin: 0px auto;
}
#container {
border: 15px solid orange;
}
#firstDiv {
border: 10px solid brown;
display: inline-block;
width: 70px;
overflow: hidden;
}
#secondDiv {
border: 10px solid skyblue;
float: left;
width: 70px;
}
#thirdDiv {
display: inline-block;
border: 5px solid yellowgreen;
}
<div id="container">
<div id="firstDiv">FIRST</div>
<div id="secondDiv">SECOND</div>
<div id="thirdDiv">THIRD
<br>some more content<br> some more content
</div>
</div>
http://jsfiddle.net/WGCyu/.
Basically you have added more clutter in your code which is creating more confusion so first I try to remove clutter which hinders understanding the real issue.
First of all we have to establish that what's the real question?
Its that why "inline-block" element is pushed downward.
Now we start to understand it and remove the clutter first.
1 -
Why not give all three divs same border width?
Let's give it.
2 - Does floating element has any connection with inline-block element being pushed downward?
No, it has nothing to do with it.
So, we have removed that div altogether. And you are witnessing same behavior of inline-block element being pushed downward.
Here comes the turn of some literature to grasp the idea of line boxes and how they are lined in the same line esp read last paragraph carefully because there lies the answer of your question.
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
If you are not sure about baseline then here is brief explanation in simple words.
All characters except 'gjpqy' are written on the baseline you can think of baseline as if you draw a simple horizontal line same as underlining right below these "random characters" then it will be the baseline but now if you write any of 'gjpqy' character(s) on the same line then lower part of these characters would fall below the line.
So, we can say that all characters except 'gjpqy' are written completely above the baseline while some part of these characters are written below the baseline.
3 - Why not check where is the baseline of our line?
I have added few characters which show the baseline of our line.
4 - Why not add some characters in our divs too to find their baselines in the div?
Here, some characters added in divs to clarify baseline.
Now when you understand about baseline, read the following simplified version about baseline of inline-blocks.
i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though).
Then its baseline would be the baseline of the containing block of the line.
ii) If inline-block in question has its overflow property set to OTHER THAN visible.
Then its bottom margin would be on the baseline of the line of containing box.
First point in detail
Now look at this again to clarify your concept that what's happening with green div.
If yet any confusion then here is added more characters close to green div to establish the baseline of the containing block and green div baseline is aligned.
Well, I am now claiming that they have same baseline? RIGHT?
5 - Then why not overlap them and see if they are fit right one on another?
So, I bring third div -left: 35px; to check if they have same baseline now?
Now, we have got our first point proved.
Second point in detail
Well, after explanation of first point second point is easily digestible and you see that first div which has overflow property set to other than visible (hidden) has its bottom margin on the base line of the line.
Now, you can do couple of experiments to further illustrate it.
Set first div overflow:visible (or remove it altogether).
Set second div overflow: other than visible.
Set both divs overflow: other than visible.
Now bring back your clutter and see if everything is looking to fine to you.
Bring back your floated div (of course there is need to
increase some width of body)
You see it has no effect.
Bring back same odd margins.
Set green div to overflow: visible as you set in your question (that misalignment is due to increase of border width from 1px to 5px so if adjust negative left you'll see there is no issue)
Now remove additional characters I added to aid in
understanding. (and of course remove negative left)
Finally reduce body width because we no longer need wider one.
And now we are back to where we started from.
Hopefully I have answered your question.
The default value for vertical-align in CSS is baseline & this rule is also apply with inline-block read this http://www.brunildo.org/test/inline-block.html
Write vertical-align:top in your inline-block DIV.
Check this http://jsfiddle.net/WGCyu/1/
Just use vertical-align:top;
Demo
I originally started on answering this question, but it was locked as dupe before I could finish, so I post the answer here instead.
First, we need to understand what inline-block is.
The definition in MDN says:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
To understand what's going on here, we need to look at vertical-align, and it's default value baseline.
In this illustration you have this color chart:
Blue: The baseline
Red: The top and bottom of the line-height
Green: The top and bottom of the inline content box.
In the #left element, you do have some textual content that controls what is the baseline. This means that the text inside defines the baseline for #left.
In the #right, there is no content, so the browser has no other option than to use the box bottom as the baseline.
Se this visualisation where I have drawn the baseline on an example where the first inline container has some text, and the next is empty:
If you specifically align one element to top, you really say that you align the top of this element to the top of of the line box.
This might be easier to understand by an example.
div {
display: inline-block;
width: 100px;
height: 150px;
background: gray;
vertical-align: baseline;
}
div#middle {
vertical-align: top;
height: 50px
}
div#right {
font-size: 30px;
height: 100px
}
<div id="left">
<span>groovy</span>
</div>
<div id="middle">groovy</div>
<div id="right">groovy</div>
The result is this - and I added the blue baseline, and the red line box:
What happens here, is that the height of line box is depended on how the the content of the entire line is laid out. This means that to calculate the top alignment, the basline alignments must be calculated first. The #middle element has vertical-align:top, so this is not used for the baseline positioning. but the #left and #right are positioned vertically so that their baselines are aligned. When this is done, the height of the line box has increased, because the #right element has been pushed up a bit as a result of the larger font size. Then the top position for the #middle element can be calculated, and this is along the top of the line box.
View this alternative example. The reason for such behavior is described in CSS3 module: line: 3.2. Line Box wrapping [1]:
In general, the start edge of a line box touches the start edge of its containing block and the end edge touches the end edge of its containing block. However, floating boxes may come between the containing block edge and the line box edge. Thus, although line boxes in the same inline formatting context generally have the same inline progression advance (that of the containing block), they may vary if available inline-progression space is reduced due to floats[...]
As you can see, the third element is pushed downward, although it does not have a overflow property. The reason must be somewhere else to find. The second behavior you notice is described in Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification: 9.5 Floats [2]:
Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.
All your display:inline-block; divs are using a special kind of baseline in this case 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties (very end) [3]:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So when you're using floating elements and inline-block elements, the floating element will be pushed to the side and the inline formatting will be recalculated according to 1. On the other hand, the next elements are shortened if they won't fit. Since you're already working with a minimum amount of space, there's no other way to modify your elements then pushing them 2. In this case, the highest element will define the size of your wrapping div, thus defining the baseline 3, while on the other hand the modification of position and width stated in 2 can't be applied to such minimal spaced maximum height elements. In this case a behavior as in my very first demo will result.
Lastly, the reason your overflow:hidden will prevent #firstDiv to be pushed to the lower edge of your #container, although I couldn't find a reason in section 11. Without overflow:hidden it works as excepted and defined by 2 and 3. Demo
TL;DR: Have a very close look on the W3 recommendations and the implementations in the browser. In my humble opinion floating elements are determined to show unexpected behavior if you don't know all the changes they do to your surrounding elements. Here's another demo which shows a common problem with floats.
the problem is because you have applied float:left on the second div. which makes the second div to come on the left side and your first div drops and comes after your second div.
If you apply float:left on the first div also, your problem will be gone.
overflow:hidden is causing no problem to your layout, overflow:hidden affects only inner elements of a div, it has nothing to do with other elements which are outside.
Try adding padding:0; to the body and removing the margin of your divs.
Add background-color:*any color aside from background* to check the difference.
Try making all CSS properties of all Elements same.
I had similar problem and while fixing this I identified that I was dropping an Element with Font property into Div Element.
After dropping that Element with Font property the alignment of all DIV was disturbed. To fix this I set Font property to all DIV elements the same as the element that is dropped into it.
In the following example, the Dropped element of class ".dldCuboidButton" defined with font-size:30 px.
So I added same property to remaining classes i.e. .cuboidRecycle, .liCollect , .dldCollect which are used by DIV elements. In that way all DIV element follow the same Measurments before and after dropping the element into it.
.cuboidRecycle {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.liCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#cab287;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCollect {
height:40px;
width:'20px; float:right';
overflow:'none';
background-color:#009933;
color:#ffffff;
border-radius:8px;
text-align:'center';
vertical-align:'top';
display: inline-block;
font-size: 30px; /* Set a font-size */
}
.dldCuboidButton {
background-color: #7c6436;
color: white; /* White text */
font-size: 30px; /* Set a font-size */
border-radius: 8px;
margin-top: 1px;
}
Here is the example of HTML dynamically created using above CSS.
$("div#tabs").append(
"<div id='" + newTabId + "'>#" + uniqueId +
"<input type=hidden id=hdn_tmsource_" + uniqueId + " value='" + divTmpfest + "'>" +
"<input type=hidden id=leCuboidInfo_" + uniqueId + " value=''>" +
"<div id='" + divRecycleCuboid + "' class=cuboidRecycle ondrop='removeDraggedCuboids(event, ui)' ondragover='allowDrop(event)'><font size='1' color='red'> Trash bin </font></div>" +
"<div id='" + divDropLeCuboid + "' class=liCollect ondrop='dropForLinkExport(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Manifest Cuboid here</font></div>" +
"<div id='" + divDropDwldCuboid + "' class=dldCollect ondrop='dropForTMEntry(event)' ondragover='allowDrop(event)'><font size='1' color='red'>Drop Template Cuboids here..</font></div>" +
"</div>"
);
I'm testing some css styles on a blog-like div layout. I used div{border: 1px solid black;} to see the divs and look at its positions.
When this line is in my style, it looks right, but I don't want to have the borders (just had it for development).
As soon as I comment it out everything changes it's positions. Why is this so?
JSFiddle Link
div{border: 1px solid black;} /* Comment this to see the problem */
body{ text-align:center; }
.postTabs{
float:left;
background-color: #c8c8c8;
width: 60px;
height: 38px;
padding: 27px 5px 5px 5px;
border-radius: 50%;
}
.postContent{
padding: 15px 15px 15px 50px;
margin-left: 35px;
margin-top: 36px;
text-align: left;
background-color: #a7a7a7;
}
<div class="postContainer">
<div class="postTabs">asdf</div>
<div class="postContent">
<div class="postBody">adf</div>
</div>
</div>
This is because of collapsing margins:
8.3.1 Collapsing margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Also the spec states:
Two margins are adjoining if and only if:
both belong to in-flow block-level boxes that participate in the same block formatting context
no line boxes, no clearance, no padding and no border separate them (Note that certain zero-height line boxes (see 9.4.2) are ignored for
this purpose.)
both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
top margin of a box and top margin of its first in-flow child
bottom margin of box and top margin of its next in-flow following sibling
bottom margin of a last in-flow child and bottom margin of its parent if the parent has 'auto' computed height
top and bottom margins of a box that does not establish a new block formatting context and that has zero computed 'min-height', zero
or 'auto' computed 'height', and no in-flow children
In this case, the first child is floated to a side and it is removed from normal flow. Hence the first in-flow child of the .postContainer container is .postContent element which has a margin-top of 36px.
Since the container doesn't establish a block formatting context, and there's no border, padding between them, the margins would be collapsed into one.
You could prevent that by giving the container:
A padding-top of 1px - for instance - Example here.
A border-top of 1px solid transparent Example here.
An overflow of anything other than visible which creates a new block formatting context - Example Here.
For further info you could refer to the spec.
Check the fiddle here
JS Fiddle
it was happening because of float:left for .postTabs class
.postContainer{
clear: both;
float: left;
width: 100%;
}
This is because of the default box model in CSS. The element is as wide as the width, plus any padding, plus any border.
You may have expected the border to sit inside of the element, but it actually makes it wider (by 2px in your case) and taller (again by 2px).
You can adjust your width and height accordingly, or you can change the box-model being used with the CSS box-sizing: border-box;
In your case, though, you are only applying the border for development purposes, so changing your CSS to support the border will mean changing it all back again later.
Rather than do all that work, use your browser tools. The screenshot below shows the browser tools in Firefox (all browser have similar tools to this). When you highlight the element in the HTML shown in the tools, it shows the outline of the element on the actual page.
This gives you your development view whenever you need it without having to change the code.
When I apply a margin to an element rather than extending its containing element it creates margin outside of it. So with the code below there is a space between the divs's coloured background.
Why does this happen? It would seem more logical to me for the containing div to be expanded (so im the code example there would be no white space and the coloured 'bars' would be fatter).
Is there a way with CSS I can stop it happening?
http://codepen.io/anon/pen/KrJgm
<div class="one">
<p>Text</p>
</div>
<div class="two">
<p>Text</p>
</div>
<div class="three">
<p>Text</p>
</div>
.one {
background: red;
}
.two {
background: green;
}
.three {
background: gold;
}
UPDATE Sorry I dont think I was clear. I understand that the margin on the paragraph tag is causing the white space but what I dont understand is why the margin isnt 'pushing back' the containing div (so it would look the same as if a padding had been applied to the containing div).
As you updated your question, I think whats troubling you is Collapsing Margins
In CSS, the adjoining margins of two or more boxes (which might or
might not be siblings) can combine to form a single margin. Margins
that combine this way are said to collapse, and the resulting combined
margin is called a collapsed margin.
Solution? Use overflow: auto; on the parent element.
Demo
If you are speaking about the white space in the demo as I am not seeing any margins used in your code.. Than below is the answer..
You are not resetting browser default styles..
Demo
* {
margin: 0;
padding: 0;
outline: 0; /* Optional */
}
Here I am using * selector which selects all the elements, and am using margin: 0; and padding: 0; to reset the browser defaults..
Some do not use * selector as they find it bad from a performance point of view, so if that's the case you can use CSS Stylesheet Reset
If you are using margins in your code than please refer this answer...
If you are aware of the CSS Box Model, border, padding and margin are counted outside of the element and not inside.
So in this case you might like to have padding and not margin.
Though, you can alter the behavior of CSS Box Model by using box-sizing property set to border-box or padding-box which will count the border and padding inside of the element rather counting outside of it..
The paragraph tag has margin on it by default. So if you want to get rid of the margin you need to set it to 0 and to expand the paragraph container you need add padding (pads inside of the container), margin is used for outside of the container
p {
margin: 0;
padding: 10px 0
}
http://codepen.io/anon/pen/Bqgyd