I have the following code:
<HTML>
<head>
<style>div{border:dashed 1px silver}</style>
</head>
<BODY style="background: #fff;">
<div style="position: absolute; background: #0f0; width: 256px; height: 96px; overflow: scroll;">
<DIV style=" display: inline-block;position: relative;top: 64px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #f00;"></DIV>
<DIV style="float: left">First</DIV>
<div style="clear: both;"></div></DIV>
<DIV style=" display: inline-block;position: relative;top: 96px; left: 32px;">
<DIV style="width: 18px; height: 14px; float: left; background: #0f0;"></DIV>
<DIV style="float: left">Second</DIV><div style="clear: both;"></div></DIV>
</div>
</BODY>
</HTML>
The second div isn't positioned on the 32 x position unless I remove the display: inline-block property, which I need. Is there a way around this?
Edit: it seems to work if I remove display: inline-block, but then the scrollbars will appear horizontally (as the div takes some invisible space).
You should use the way position:absolute elements are displayed when inside position:relative.
In addition, to avoid the horizontal scroll bar, use overflow-y.
Working example: http://jsbin.com/uveni3
When using "inline-block" properties, you should always start your HTML opening tag in a DTD format. placing one there should resolve this.
Related
I've got custom elements in my code which display some odd behaviour when a child element has a display: inline-block style.
Consider the following two div elements:
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
In the first main div it is clear that the custom element randomcustomelement is ignored by the browser. It does have a proper width and height, but is not rendered, like expected. In the second main div, however, randomcustomelement does get rendered, and what more, it has a very strange height of 17px. I've included an image depicting this through Chrome's element inspector below:
The only difference between both examples is that the child div which is wrapped by randomcustomelement has display: block in the first example, and display: inline-block in the second example. I've given the randomcustomelement a distinct yellow color to also visibly depict that it does get rendered.
This problem is present in all browsers, even though they should ignore the custom element:
User agents must treat elements and attributes that they do not understand as semantically neutral; leaving them in the DOM (for DOM processors), and styling them according to CSS (for CSS processors), but not inferring any meaning from them.
https://www.w3.org/TR/html5/infrastructure.html#extensibility-0
This is really giving me a headache, because I need the inner div to be a display: inline-block. So I would need the second example's code to give the first example's results.
Forcing the style of the randomcustom element to be display: inline-block and height: 0 gives the desired result.
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow">
<div style="display: block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
<div style="padding: 4px;">
<randomcustomelement style="background-color: yellow;height:0;display:inline-block">
<div style="display: inline-block; height: 36px; background-color: red; width: 125px;">
<div style="display: block; width: 100%; height: 12px; background-color: green;"></div>
</div>
</randomcustomelement>
</div>
I want the third div down, "contents", to fill its container but leave exactly 200px of space on the right side to fit the fixedWidthButtons.
So far, no matter what I set right to, it doesn't affect the width of the div.
If I set its display:block; it fills the container completely and the buttons get pushed out of the container.
If I set the display:inline-block;, the container becomes 181.344 px wide and won't resize no matter what I set right to.
<div class="container" style="left:0; right:0; margin-bottom: 10px; height: 65px; display: block;">
<div class="panel" style="width:100%; display: block;">
<div class="contents" style="display:inline-block; position:relative; left: 0px; right: 200px;">
<div class="buttonTextAndCounterContainer" style="width:100%; display:block">
<div class="button" style="float:left; display:none;"></div>
<div class="textAndCounterContainer" style="display:block;">
<div class="counter" style="float:right; display:block;"></div>
<div class="text" style="width:100%; position:relative; left:0px; vertical-align:top; display:inline-block;"></div>
</div>
</div>
</div>
<div class="fixedWidthButtons" style="display:inline-block; float:right;"></div>
</div>
</div>
You need to read up on some of properties you're dealing with. Position is for a point of origin not width.
You also express some issues with block versus inline-block these are easily googled. That said a solution to your problem is to change the css:
.content {
display: inline-block;
width: calc(100% - 200px);
}
Few suggestions:
position: absolute works relative to where its relative is (parent who is positioned relative is).
position: relative informs that the element is not positioned (without changing the layout at all) and make it's children if set to absolute position behave relative to it's parent
Setting inline-block also give us the provision of setting width and height which it would adjust to; if that is not needed, better off to go with inline.
It is good to remove the inline-styles - sample snippet below
.container {
margin-bottom: 10px;
height: 65px;
border: 1px solid black;
position: relative;
}
.contents {
border: 1px solid grey;
position: absolute;
display: inline-block;
width: 300px;
left: 0;
}
.fixedWidthButtons {
display: inline-block;
width: 200px;
position: absolute;
right: 0;
border: 1px solid red;
}
<div class="container">
<div class="panel">
<div class="contents">
<div class="buttonTextAndCounterContainer">
<div class="button">button</div>
<div class="textAndCounterContainer">
<div class="counter">counter</div>
<div class="text">text</div>
</div>
</div>
</div>
<div class="fixedWidthButtons">For my buttons</div>
</div>
</div>
Solution:
To set a div's width by using only left and right, you must set the div's position: absolute;
Source: http://alistapart.com/article/conflictingabsolutepositions
I have a strange problem with my CSS / HTML.
I have a LI which contains two DIV, each 15px height:
But all the browsers compute the height of the LI > 15px.
Also the elements are vertically displaced.
In my opionen the LI should have a height of 15px.
The first DIV inside the LI is a text, and the second DIV is just there to display an background image.
If you check the height with the Firefox Developer Tools, the height of each div is not higher than 15px.
Can someone explain to me why this is happening ?
Just open the code below in the newest Firefox.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body style="font-size:12px;">
<div style="min-height:500px; width:20%; margin:auto; background-color:red;">
<ul style="background-color:green;">
<li style="background-color:yellow;">
<div style="display:inline-block;width:90%">li #1</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</li>
<li style="background-color:yellow;">
<div style="display:inline-block;width:90%">li # 2</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</li>
</ul>
</div>
</body>
</html>
No additional CSS is used.
If you replace the LI with DIV, it has still the same behaviour
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body style="font-size:12px;margin:0;padding:0;">
<div style="min-height:500px; width:20%; margin:auto; background-color:red;">
<div id="parent1">
<div style="display:inline-block;width:90%">li #1</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</div>
<div id="parent2">
<div style="display:inline-block;width:90%">li # 2</div>
<div style="display:inline-block;background-image: url(bg1.jpg);background-size:15px 15px; width:15px;height:15px;" ></div>
</div>
</div>
</body>
</html>
If I give the inner div's of the parent divs the style attribute "float:left;" everything looks as it supposed to be. I want to understand why the browser give the parent div the addiotional 4px, and make it look shitty.
If you set the height of the parent DIV to 15px, it looks how it supposed to be. But if you don't set the height, the height is 18px. How does the browser calculate 18px ? The height of each child is only 15px.
because inline layout has space. like:
<div style="background-color: black; width: 50px">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
<!-- there is a space here, maybe 4px or other size -->
</div>
so the problem is how to remove inline space. There are some methods:
use font-size: 0 , which can set "space" 0 also.
<div style="background-color: black; width: 50px;font-size:0">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
make child be block. because block elment dosen't leave space.
<div style="background-color: black; width: 50px">
<div
style="
display: block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
use float(not recommended now, use flex instead)
<div style="background-color: black; width: 50px; overflow: hidden">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
float: left
"
/>
</div>
use flexbox
<div style="background-color: black; width: 50px; display: flex">
<div
style="
display: inline-block;
width: 50px;
height: 50px;
background-color: red;
"
/>
</div>
you can learn from below links also:
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
How do I remove the space between inline/inline-block elements?
It’s because you are making the DIVs inline-block, which means they will be laid out in the line box like any other inline element, and that means leaving space for the underlengths of potential text on the same line.
vertical-align: bottom for the DIVs will fix that.
This question already has answers here:
Why is there an unexplainable gap between these inline-block div elements? [duplicate]
(6 answers)
Closed 8 years ago.
I want to partition a block into two separate smaller blocks. For that, I am using the following HTML:
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
</div>
</div>
Result:
Here's the first problem: As you can see, there is still some of the (red) background visible between the two boxes (grey & green). I don't know how to get rid of that space - both div elements already have a margin, border and padding of 0. When I increase the width of the green div element to 200px (as it should be), the element jumps out of its parent since it grew too large.
Is there any default padding, or a rule that browsers must add some space between simple elements? If so, how can I get rid of it?
The second issue arises when I add a input tag to the green div:
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="display: inline-block; width: 196px; height: 200px; background-color: green;">
<input type='submit' value='Details'/> <!-- new -->
</div>
</div>
Now, for some reason, the green div is forced down again:
The input element (and the containing div by extension) is moved down to the bottom of the red div. I found out I can stop that by using position: absolute but I'm confused as to why it behaves like this at all. It seems like there's something more subtle going wrong, but I don't know what.
Thanks for your help.
Instead of display:inline-block use float
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="float: left; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="float: right; width: 200px; height: 200px; background-color: green;">
<input type='submit' value='Details'/> <!-- new -->
</div>
</div>
DEMO
<div style="width: 300px; height: 200px; background-color: red; ">
<div style="display: inline-block; width: 100px; height: 200px; background-color: lightblue;">
</div>
<div style="display: inline-block;position:fixed; width: 200px; height: 200px; background-color: green;">
<input type='submit' value='Details'/>
</div>
</div>
Demo: http://jsfiddle.net/hsakapandit/c6AUF/
I have created the following
http://jsfiddle.net/fcW66/1/
CSS
.div_wrapper {
float: left;
width: 100px;
background: 3333;
margin: 15px;
background: #cacaca;
z-index: 1;
}
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
}
.div_one:hover .div_two {
display: block;
}
HTML
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<br style="clear:both;" />
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
<div class="div_wrapper">
<div class="div_one">
<img src="#" style="width: 100px; height: 100px;">
<div class="div_two">description</div>
</div>
</div>
When you hover over it shows the description, but it pushes the other divs further. I have tried giving the div_wrapper a fixed width, which fixes that problem but when the div2 appears it shows under the next div that is under it. I tried adding a z-index and it did not change anything. I need the div_two to show over the top of the divs that are below it and not change the layout.
If you want white-space in the location of the object BEFORE hover, you would use visibility, not display.
visibility:hidden, instead of display:none
and visibility:visible, instead of dislpay:block
You should use position: absolute to position this div. Absolutely positioned elements do not take up space within their container preventing them from pushing other elements around.
In most cases such as this, you will want to set the parent element to position: relative as well, so that the absolute element can be positioned relative to its parent instead of the whole document.
http://jsfiddle.net/fcW66/7/
.div_one{
position: relative;
}
.div_two {
/* ... */
position: absolute;
width: 100%;
}
You can use position: absolute; to accomplish this.
Here's a fiddle http://jsfiddle.net/QbAzY/
Add position:absolute; and width: 100px; to your .div_two rules
.div_two {
display: none;
height: 120px;
background: #444;
z-index: 999;
position:absolute;
width: 100px;
}
jsFiddle example
z-index only applies to positioned elements, so by setting position:absolute on your .div_two elements it not only allows the z-index to work, but it takes those elements out of the normal flow of the document and won't push the other divs down. Note that you also have two background rules on your .div_wrapper element, and a z-index rule that isn't doing anything.