Here is an simplified example of my real problem.
<div id="con">
<div id="a"></div>
<div id="b"></div>
<div id="c">
<div id="d"></div>
<div id="e">blablabla</div>
</div>
</div>
Is it possible to put the #a div between #d and #e?
Check it live here:
http://sunnyweb.hu/test.php
Can I bring the "blablabla" before to the blue div without changing the div structure?
I am not sure about the first part of your question because I don't you if you want to position the divs with position so they are in some kind of order or z-index so they are stacked a certain way.
But the second part is real easy. All you need to do is set the z-index of div#e to something higher then div#a's z-index.
Related
in mean this:
HTML looks like this...
<div id="div1">
something...
**<div id="div2">
</div**>
</div>
<div id="div2"> should always be positioned at the bottom
of <div id="div1">
Yes it's possible to using position : reletive and absolute.
You can move div any side..
And also use flex to and flex properti order. Example order:2.
Bellow code work after applying display flex.
I was just wondering if something like this would be possible:
<div id="inventory" >
Blabla <BR/>
Blabla
<div id="empty_slots">
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div class="shop_empty_slot"></div>
<div style="clear: both"> </div>
</div>
</div>
JFiddle link
I'd like to have the #empty_slots div to be placed at the bottom of #inventory (without changing the position to absolute).
So far it only works when I set the position to absolute. But this is then causing issues
when I place more elements to the div. They're all being placed behind the #empty_slots instead of just expanding the #inventory height.
You've got it almost right, you should place the parent (#inventory) relative, which you already have. And place the child (#empty-slots) absolute instead of relative.
You said you didn't want to place it absolute, but without it, you can't achieve what you want. Is there are reason why you don't want it absolute?
Check the updated Fiddle.
as you can see, vote button and some text got out of div. how to fix it? and how to set a value of width, when column become "adapted"?
code is:
div class="container-fluid">
<div class="row-fluid">
<div class="span2">
</div>
<div class="span10">
</div>
</div>
</div>
Seems like extra padding is given to the inner element of span2 which is causing such problem, remove that padding and everything is gonna work fine hopefully!
Another possible solution would be fixing left bar as you want it for always
try
position: fixed;
I am sure one of the solution will work for you!
Consider The Following case,
<div id="d1" style="position:relative">
<div id="d2" style="position:absolute">
<div id="d3" style="position:absolute">
</div>
</div>
</div>
By Referring the Link, I Just confirmed that the <div id="d3"> will be relative to the <div id="d2">.Even if we given position as absolute for <div id="d2">. Similarly what would it assumes when we place <div>s like below? (relative <div> inside a absolute <div>)
<div id="d1" style="position:relative">
<div id="d2" style="position:absolute">
<div id="d3" style="position:relative">
</div>
</div>
</div>
can anybody explain this.?
You would expect the relative div d3 to maintain position relative to it's parent. See W3 Specification for Css for more information on how things should be positioned.
I emphasise should as there are quirks within individual browsers for the box model that may have an impact on this.
See the JSFiddle Here for a quick demo of this.
Given the html/markup
<div id="d1" style="position:relative">
<div id="d2" style="position:absolute">
<div id="d3" style="position:relative">
</div>
</div>
</div>
div#d1
div#d1 will remain in the normal flow of the document.
div#d1 has no offset properties (Top, Right, Bottom, Left) and therefore will remain exactly where it is. i.e. it's position will be such as if no position: relative is applied to it.
div#d1 wil act as a new positioning context for div#d2.
div#d2
div#d2 will be taken out of the normal flow of the document.
div#d2 will be positioned relative to div#d1.
div#d3
div#d3 will remain in the normal flow of the document but it's flow is determined now by div#d2.
Learn CSS Positioning in Ten Steps
As #Kami said, div#d3 should be relative to its parent, and is shown here -- I put together a jsFiddle to explain better, and so you can play with different results.
jsFiddle: http://jsfiddle.net/3ezcV/
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Why does the background color not show as black? I cannot set the width and float, is it possible without them?
Since the outer div only contains floated divs, it renders with 0 height. Either give it a height or set its overflow to hidden.
Change it to:
<div style="background-color:black; overflow:hidden;" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
Basically the outer div only contains floats. Floats are removed from the normal flow. As such the outer div really contains nothing and thus has no height. It really is black but you just can't see it.
The overflow:hidden property basically makes the outer div enclose the floats. The other way to do this is:
<div style="background-color:black" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
<div style="clear:both></div>
</div>
Oh and just for completeness, you should really prefer classes to direct CSS styles.
Floats don't have a height so the containing div has a height of zero.
<div style="background-color:black; overflow:hidden;zoom:1" onmouseover="this.bgColor='white'">
<div style="float:left">hello</div>
<div style="float:right">world</div>
</div>
overflow:hidden clears the float for most browsers.
zoom:1 clears the float for IE.
This being a very old question but worth adding that I have just had a similar issue where a background colour on a footer element in my case didn't show. I added a position: relative which worked.