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/
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>
My code structure looks like this
<div style="height: 100px;
Width: 200px;"> <!-- Container -->
<div style="float: left;
height: 50px;
Width: 100px;
background-color: red;">
</div>
<div style="float: left;
height: 50px;
Width: 100px;
background-color: blue;">
</div>
<div style="float: right;
height: 50px;
Width: 100px;
background-color: green;">
</div>
</div>
But the right position of elements should look like this:
┌──────┬──────┐
│ red │green │
├──────┼──────┘
│ blue │
└──────┘
I cannot change or add any additional code, the only way is with CSS.
How should I float the divs to be in the right order as I mentioned above?
Edit: My code doesn't and can't contain div with clear.
you dont need floating for that. disable all floating using !important to override the inline styles, and then use :nth-of-type() to select the green div and position it absolutely with right and top equal 0;
div {
position: relative;
}
div > div{
float: none !important;
}
div > div:nth-of-type(3) {
position: absolute;
right: 0;
top:0;
}
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
You can use clear: left on the blue box to push it down and then use negative margin on the green box to push it up.
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left;height: 50px;
width:100px; background-color:red;">
</div>
<div style="float:left;clear:left;
height: 50px; Width:100px; background-color:blue;">
</div>
<div style="float:left; height:50px;
width:100px; background-color:green;margin-top:-50px;">
</div>
</div>
Well this is more like a puzzle instead of a legit question but here goes.
With the proper use of margins and positions in addition to assigning null to clear property one can accomplish your scenario.
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;"></div>
<div style="float: right; height: 50px; margin-top: 50px;Width:100px; background-color:blue;position: absolute;"></div>
<div style="clear: none;"></div>
<div style=" height: 50px; margin-left: 100px;margin-bottom: 50px;Width:100px; background-color:green;"></div>
</div>
</div>
Keeping the same HTML structure, you could select the divs in CSS using :nth-child(N). In this case you'd just need to update the blue (2) and green (4) boxes, and the one with the clear:both style (3):
div > div:nth-child(2) {
margin-top: 50px;
}
div > div:nth-child(3) {
display: none;
}
div > div:nth-child(4) {
margin-top: -100px;
}
<div style="height: 100px; Width: 200px;">
<!-- Container -->
<div style="float:left; height: 50px; Width:100px; background-color:red;">
</div>
<div style="float:left; height: 50px; Width:100px; background-color:blue;">
</div>
<div style="clear:both;"></div>
<div style="float:right; height: 50px; Width:100px; background-color:green;">
</div>
</div>
Notice that this will work for this particular example. It would be ideal if the container div had an id and use that instead of div >.
For a more generic solution that would work independently of the height of the boxes, you could use transform:translate() like this:
div > div:nth-child(2) {
transform:translate(0%, 100%);
}
div > div:nth-child(3) {
display:none;
}
div > div:nth-child(4) {
transform:translate(0%, -100%);
}
As you can see on this JSFiddle: http://jsfiddle.net/eekhjv3n/1/
Here is 3 inline blocks. The first one is scalable and the right two blocks has fixed width.
In case we resize browser right to block should be visible anyway. #blockID should fit the page, at the same time image should be scalable if we resized window.
I'm trying to make image in first block scalable.
I found several ways to do that using JS, but JS is not suitable because of discreteness. Is there some tricks to do that using only css?
Here is my code (http://jsfiddle.net/t69f60s6/):
<div style="width: 100%; height: 300px; white-space: nowrap;" id="blockID">
<div style="max-width: 640;">
<div style="display: inline-block; height: 300px; max-width: 300px; width: 100%; background: #ffff00; position: relative; overflow: hidden;" id="pano">
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>
</div>
<div style="display: inline-block; height: 300px; width: 640px; background: #000;">
</div>
<div style="display: inline-block; height: 300px; width: 60px; background: #ff7870;">
</div>
</div>
</div>
UPDATE 1:
I have changed the cursive text
UPDATE 2:
I can achieve this effect using table css. But table is not good.
http://jsfiddle.net/6ng62eb7/4/
Try giving the image only a max-width of 100%.
So change:
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" top:0; left:0; width:100%; min-width: 100%; max-width: 100%; position: absolute; "/>
to:
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style="max-width: 100%;"/>
Updated Fiddle
You need to give the image a max-width: 100% . This will scale the image in regards to it's container. Then you need to scale the container the image is in. For now you have set <div style="max-width: 300px; width: 100%;" id="pano"> for the parent div, so the img inside will only total to 300px at max.
You also have the overall container set to <div style="max-width: 640px;">, which means that all 3 of your elements together will never be bigger than 640 px.
This is why you only see your image scaling when you make the browser window smaller.
Bottom line is, you have to make the whole element (including its container responsive or this won't work) - you have to use % instead of px, em... when defining box size. This also means the other two elements you want to keep to the right have to be in % (and all 3 need to add up to 100%.)
Try to combine display-block and inline-block like here:
<div style="width: 100%; height: 300px; white-space: nowrap;">
<div style="width: 100%; min-width: 641px; ">
<div style="display: table-cell; width: 30%; height: 286px; background: #ffff00; max-width: 350px; vertical-align: top;" id="pano">
<img src="https://c1.staticflickr.com/9/8697/17332403271_4122fda0b8_h.jpg" style=" max-width: 90%; margin: 5%; " />
</div>
<div style="display: table-cell; width: 70%; min-width: 641px;">
<div style="display: inline-block; width: 641px; height: 286px; background: #000;" id="content">
</div>
<div style="display: inline-block; width: 60px; height: 286px; background: #0044ff;" id="basket">
</div>
</div>
</div>
</div>
http://jsfiddle.net/rfh8dgqu/
I'm not sure about cross-browser compatible but it works in chrome
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.
I have the following html divs :
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
what I am trying to do is to display the first div ( contains a bar chart) and the second div(contains some text fro the chart) next to each other, then below them display the other two divs (contain other charts) one after the other vertically i.e. I want it to look like:
and what i get currently is :
cdfChart_div (div4) is getting displayed on top of lineChart_div(div3).
What CSS style do i need to use to fix this?
On the div that comes immediately after the floated stats_div:
style="clear:left;"
jsFiddle Demo
Full code:
...
<body>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
<div id="lineChart_div" style="clear:left; width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
</body>
...
Since stats_div is floated, its contents are taken out of the normal flow. Thus, the contents of the next div that is part of the normal flow does not make space for the contents of stats_div. You have have to clear one side of the next div if you want its contents to come after the contents of the previous floated div. Often you'll see clear: both, which works on either edge of the normal flow div.
try
<body>
<div style="overflow:auto">
<div id="barChart_div" style="width: 600px; height: 250px;float:left; "></div>
<div id="stats_div" style="width: 350px; height: 250px; float:left;"></div>
</div>
<div id="lineChart_div" style="width: 600px; height: 250px; "></div>
<div id="cdfChart_div" style="width: 600px; height: 250px;"></div>
Take a look to my example here
HTML
<body>
<div id="barChart_div" style="width: 145px; height: 250px;">aa</div>
<div id="stats_div" style="width: 350px; height: 250px;">bb</div>
<div id="lineChart_div" style="width: 600px; height: 250px;">cc</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;">dd</div>
</body>
CSS
#barChart_div, #stats_div { float:left; }
#lineChart_div { clear:left; }
Explaination
First of all remember that have an "in-line" CSS isn't a good practise. You have to prefer external CSS or internal (i.e. header) css.
However let's see that example: jsFiddle.
As you can see, if you don't specify differently all your divs will result in an "ideal column". That's because the normal flow of the "html parser" will put them in that position.
If you do this with span element, instead, you obtain all the element on the same "line" (if they can stand and don't overflow, obviously). You can see that here.
When you tell float:left you're "forcing" the div to be floated at the "right margin" of the previous element.
Now, due to the second element floated, the third element will act at the same way.
For act as "standard" you have to use clear:left that will restore the "normal" behaviour
If you can, change your source order so the stats_div comes first, then use float:right on just it.
<div id="stats_div" style="width: 350px; height: 250px; float:right; background-color:#0099CC; border:1px solid black">custom</div>
<div id="barChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">1</div>
<div id="lineChart_div" style="width: 600px; height: 250px; float:left;background-color:#0099CC; border:1px solid black">2</div>
<div id="cdfChart_div" style="width: 600px; height: 250px;float:left; background-color:#0099CC; border:1px solid black">3</div>
paste it to your html, effect will be visible