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.
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.
How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks
<html>
<body>
<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
<div class="tasksTabText">
<p class="tasksBtnText">Name</p>
</div>
<div class="tasksAddBox">
<p class="tasksAddBtn">Last</p>
</div>
</div>
</div>
</div>
</body>
</html>
LINK - https://jsfiddle.net/9rqd9ot9/15/
I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.
LINK- https://jsfiddle.net/9rqd9ot9/38/
I have a div surrounding multiple divs. The border of parent div is not covering all child divs as shown in the fiddle. Can anyone tell what is the issue here?
<div style="border:1px dashed gray;">
<div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:50px;font-size: 10px">Some content</div>
<div style="position:relative;top:60px;background-color:#E6E0EC">
<div class="glyphicon glyphicon-remove"></div>
</div>
</div>
JSFiddle link
You are using position: relative on the divs not surrounded by the border. The relative position property moves the contents of the element but keeps the reserved space of the element in the normal flow.
If you want to achieve the same layout with a border around everything it is best to use the marginproperty. I updated your jsfiddle to show an example
JsFiddle
Well there is no need for position relative, in all the child divs, just remove those tags.
Using top to specify the spacing is not a good idea in a case like this. It will be fragile. Let the elements make room for themselves and let the box model make space in the parent. To do this use margin-top instead.
Fiddle: http://jsfiddle.net/markm/rmvneo88/
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.
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/