On setting the inner div to inline-block, it renders slight below that of a block. Why is that ?
http://jsfiddle.net/Sb9Wb/
<div class="outer">
<div class="inner">
<p> This is a inner div</p>
<p>Height set to 100%</p>
<p>Why it renderes slightly below when set to inline-block that of a block?</p>
</div>
Please try setting the inner div as block and see the difference!
And the same inline-block adds a scrollbar here http://jsbin.com/kabom/1/edit
Just because, a class below is added to a div!
.sapUiView {
display: inline-block;
}
That space you are actually seeing is caused by the "p" margin that becomes visible when you add the inline-block property.
Try adding
margin:0;
to the first child of p like so:
http://jsfiddle.net/Sb9Wb/2/
Related
I'm getting some strange whitespace between two divs I have.
Each div has the css property display: inline-block and each have a set height and width.
I cannot find where the whitespace is.
Here is a Fiddle
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
Use:
float:left;
clear:none;
In both div
If you want to retain your coding layout, avoid floats and keep each div on it's own line entirely...
<div id="leftSide">Some content here</div><!--
--><div id="rightSide">Some more content here</div>
Only add this to your CSS
h1 {
padding:0;
margin:0;
}
Space between div is only due to h1 Margin and Padding
This does the trick:
<div id="left_side">
...
</div><div id="right_side">
...
</div>
Notice how the right-side div starts immediately after the closing tag of the left-side div. This works because any space between the elements, since they are now inline, would become a space in the layout itself. You can mirror this behavior with two span elements.
Demo.
You can also add display: flex; to the divs' parent container (in this case, body). Fiddle.
best way is settings parent element's font-size to 0 then normal font-size to child elements inside that parent (otherwise inherits zero from parent)
Floated both of the elements left, also made the 30% width into 40% to fill all the space, but this isn't necessary. Please be aware, "inline-block" isn't supported by IE7 but can be fixed with a workaround.
http://jsfiddle.net/RVAQp/3/
Move these statements onto the same line:
</div><div id="right_side">
Tried using float instead of "inline-block", no problems. Just changed the display:inline-block to:
#left_side {float: left;}
and
#right_side {float: right; margin-right: 10%}
No apparent problems. Could be wrong.
Don't know why but I resolved this problem by adding border: 1px solid red;(vertical) and float: left;(horizontal) to related DIV style statement and white-spaces removed.
Parent div set to font-size: 0px and chiilds to wanted size like 17px :)
I have the following:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.
document.getElementById('go').onclick = function(e) {
document.getElementById('div_2').style.lineHeight = '30px';
};
<button id="go">Go</button>
<div>
<div style="display:inline-block;" id="div_1">div_1</div>
<div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>
With the test case, it's now crystal clear.
Add vertical-align: top to the first div:
<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>
Fixed version: http://jsfiddle.net/my6Su/5/
Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html
Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.
Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.
I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.
<div>
<div style="display:inline-block; line-height:10px;">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
try this. this will work.
I noticed this strange behavior years ago back when I was first learning HTML, and still don't understand it.
Both jsfiddles are based on the following HTML:
<div class="parent">
<div class="child">
Child content
</div>
</div>
In the first jsfiddle, I'm adding a margin-top to the child element, yet the entire parent element shifts downward: http://jsfiddle.net/flyingL123/uUgVz/
In the next jsfiddle, the only thing I'm changing is adding a border to the parent element, and now the parent element no longer shifts down the page: http://jsfiddle.net/flyingL123/uUgVz/1/
Why don't both jsfiddles behave the same? Why is the parent element effected by the margin-top on the child element in the case when the parent element does not have a border?
It is because the childis not empty (height!==0)
<div class="parent">
<div class="child">
Child content
</div>
</div>
is the same as
<div class="parent">
<div></div>
<div class="child">
Child content
</div>
</div>
empty element will be used as wrapper
and adding border to the parent is like saying hey now we want to see something which is the same as just adding a letter:
<div class="parent">
m
<div class="child">
Child content
</div>
</div>
-Demo-
Note that you are applying the style on the parent element and not the child, that means the first and all next notempty childif they dont have a style set will adopt the parent style
It has to do with how block elements are rendered. By default, divs don't hide their contents, it means that anything inside a div that results being larger than its parent would stick out of it, like the margin of your child element, however you can use the overflow: hidden attribute so that the content is limited only to the size of the container, and thus, making your margin to push from the inside of your div, since it can't stick out of it:
See the updated fiddle:
CSS:
.parent{
width:300px;
background-color:#666;
color:white;
overflow: hidden;
}
.child{
margin-top:50px;
}
But in case you still want the children to stick out of the parent but to be pushed down, you can set the container's padding value instead of the child's margin value, see this other fiddle:
CSS:
.parent{
width:300px;
background-color:#666;
color:white;
padding-top: 50px;
}
.child{
/* margin-top:50px; */
}
The effect you described is caused by Margin Collapsing
Go through this Stackoverflow to learn how to remove the margin collapsing.
I am trying to create a variable height div. It seems if the div's inside the variable height div are set to float:left The variable height div gets a height of 0. If I set the variable height div float:left the div grows with the content inside it but now the variable height div is sent to the left of the screen instead of the center. How do I keep the main div in the center but also have it grow with it's child div's?
<div id="VariableHeightDiv">
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="child floatLeft"></div>
<div class="clear"></div>
</div>
and in your css
.clear{clear:both;}
You need to clear the floats, otherwise the browser is unable to understand and calculate correctly the height of the container div. That is why in the end we add an empty div with clear:both.
Adding overflow: auto; to your main div will keep it centered, and will also force it to wrap around the elements inside of it. Two great articles on the float property and the overflow property can be found here: http://css-tricks.com/all-about-floats/ / http://css-tricks.com/the-css-overflow-property/
I wouldn't recommend using the <div style="clear: both;"> technique, because it's unnecessary extra markup, and doesn't add anything to the presentation.
Floated divs are somewhat removed from the document's "flow". You can force a container div to completely surround its contents, even if they're floated, by using a clearing element afterwards:
<div>
<div style="float: left">blah blah</div>
<br style="clear: both" />
</div>
There's better methods detailed here.
For the main div, include these CSS rules:
margin: 0 auto;
overflow: auto;
Also make sure that you have a min-height and width property set for the main div.
Edit: I've included the overflow property as well.
add overflow:hidden or overflow:scroll or overflow:auto for the parent div.
More info http://www.quirksmode.org/css/clearing.html
example: http://jsfiddle.net/MbgH4/1
I have the following:
<div>
<div style="display:inline-block; ">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
Why does having a line-height property set for the second div also effects the first div? And how to correct for this i only need the second div to be effected by line-height because I need to specify a different line-height for the first div. Thanks in advance.
document.getElementById('go').onclick = function(e) {
document.getElementById('div_2').style.lineHeight = '30px';
};
<button id="go">Go</button>
<div>
<div style="display:inline-block;" id="div_1">div_1</div>
<div style="display:inline-block; line-height:24px;" id="div_2">div_2</div>
</div>
With the test case, it's now crystal clear.
Add vertical-align: top to the first div:
<div style="display:inline-block; line-height:24px; vertical-align: top" id="div_1">div_1</div>
Fixed version: http://jsfiddle.net/my6Su/5/
Read this to understand the relationship between display: inline-block and vertical-align:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Also useful, for a visual demonstration:
http://www.brunildo.org/test/inline-block.html
Firstly, the effect of line-height is only on inline elements. When line-height is applied to block, inline-block or any other type of element that is not inline, the effects are on the inline descendant elements only.
Secondly, in a line-box (an abstract box enclosing inline elements in a line), all the inline elements are aligned along the baseline. When you change the line-height for the second div, it adds half-leading at the top (and bottom) of that inline-element. And top half-leading pushes the baseline lower, which in turn moves the first div lower.
I am not exactly sure what you are trying to achieve, but, I would recommend either using the vertical-align property or just use position relative.
<div>
<div style="display:inline-block; line-height:10px;">div_1</div>
<div style="display:inline-block; line-height:20px;">div_2</div>
</div>
try this. this will work.