I have the following div table:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div id="innerDiv"></div>
</div>
</div>
</div>
Inside the cell is a div with the id "innerDiv". Is there a way to position this div such that its top/left corner is located anywhere within the cell? I tried all the css position values but none work.
We're not supposed to give the same element table-cell display and relative position. It's not supported equally between modern browsers (try this in FF).
If it's the only way you can do things on your specific case, add a relatively positioned wrapper div inside the cell.
For example:
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">
<div class="relativeDiv">
<div id="innerDiv"></div>
</div>
</div>
</div>
</div>
.relativeDiv
{
height: 100%;
width: 100%;
/* You may need some negative margin
if there's a padding on the table cell */
position: relative;
}
#innerDiv
{
position: absolute;
/* You're now free to set the top and left attributes freely */
}
For further reading:
http://css-tricks.com/absolutely-position-element-within-a-table-cell/
Does Firefox support position: relative on table elements?
You should use position property in outer div explicitly（such as: relative,fiexd,absolute)
div {
position: relative;
};
#innerDiv {
position: absolute;
left: 10px;
}
Related
I'm planning to create a layout where one of the DIV is fixed using Bootstrap. However, the DIV is creating an undesirable effect.
JSFIDDLE: http://jsfiddle.net/cstoq3ec/
Here's the HTML
<div class="container">
<div class="row">
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
<div class="col-6">
<div class="simple">
This is just a plain block
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="fixed">
hey
</div>
</div>
<div class="col-6">
<p class="scroll">
This is the scrollable section.
</p>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
}
.scroll {
height: 1000px;
background-color: grey;
color: #fff;
}
.simple {
background-color: grey;
color: #fff;
margin: 15px 0;
}
Notice how the red color DIV is extended all the way to the right side! I want it to stay within its DIV. How should I proceed?
You can't. that's why you have position:absolute.
Once you use position:fixed on an element you get it completely out of the HTML flow so it does not matter what their parents are and their size. You used width:100%so it's 100% of window width.
Is you wonder why, then, it is affected by parent padding (left and top margin), it is because you haven't set any "left, top, bottom or right value" and modern browsers automatically set the values based on the parent. use your own value to check as you can see here: FIDDLE
.fixed {
position: fixed;
width: 100%;
background-color: red;
color: #fff;
box-sizing: border-box;
top:0;
left:0;
}
which, btw, in my opinion you should never rely on as You may have unexpected problems in some browsers. Once you use absolute or fixed position is highly recomend to set at least "top and left values".
If You need the fixed element same width as Your parent I would use javascript / Jquery so you calculate the width of the parent and then use the value to your fixed element.
I would like my parent div to adjust its size based on the content but my problem is the contents are using position: absolute; therefore rendering the parent div as if it doesn't have any content.
Here's a Fiddle and the corresponding code:
HTML
<p>Gray box adjusts based on the green box's size.</p>
<div class="box">
<div class="block"></div>
</div>
<p>Gray box doesn't adjust because the green box is absolutely positioned.</p>
<div class="box">
<div class="absolute block"></div>
</div>
CSS
.box {
padding: 5px;
background-color: #888888;
}
.block {
width: 60px;
height: 60px;
background-color: #65da98;
}
.absolute {
position: absolute;
left: 50px;
}
I guess what I want to take from this question are the following:
What are my possible solutions?
Which of those solutions would be best if we're to take into account cross-browser friendliness?
I have an image within a parent div. I also want to have some text underneath the image within that parent div, but I only want the width of that text div to be as large as the image.
<div class="parent">
<div class="child">
<div class="image-container">
<img src="..." />
</div>
<div class="text">
...
</div>
</div>
</div>
Here is a jsfiddle that illustrates my problem:
jsfiddle
How can I resolve this? I can't put the text inside the same div as the image because the image is cut off using a max-height css.
Is this what you were after? Can you use jquery?
$('.child').width($('.image-container').width());
http://jsfiddle.net/YRYZA/
I simplified your markup and css a little bit. You can keep them in the same parent. use position absolute for the text and add position relative to its parent. that way it will take the parent's width. and the parent's width will be set by whatever size the image is, hence the text will be the same width as the image at the end of the day.
html:
<div class="parent">
<div class="image-container">
<img src="http://lorempixel.com/400/600/" />
<div class="text">
text
</div>
</div>
</div>
CSS:
.parent {
width: 700px;
}
.image-container {
background: green;
float:left;
position: relative;
}
div.text {
background: green;
position: absolute;
width:100%;
left:0;
}
jsfiddle
Do this:
.child{ position: relative; }
.text{ position: absolute; left: 0px; right: 0px; }
Then .child div would be as wide as the image (not influenced by .text width) and .text would fit in the space.
JSFiddle: jsfiddle.net/8hV2E/12
HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.
Can this be done?
It seems like this should be possible. In general, I want the whole panel (div) to flow as you would usually expect within the body. However, I'd like to absolutely position the controls within the panel.
My experience is that when I try to absolutely position a control within a flow panel, the controls are not treated as being contained by the panel with relative coordinates of it container.
You can do this with a flow panel in WinForms and I like the mix of approaches. In my mind, it would be the best of both worlds, though I expect responses saying it would be a bad thing.
Comments?
Change the CSS 'position' property of the <div> to 'relative'. If your HTML looks like:
<body>
<div id="container">
<a id="control">start</a>
</div>
</body>
then update the CSS to:
#container {
position: relative;
}
#control {
position: absolute;
top: 0;
left: 0;
}
The #control element will now be relative to the #container.
Given this HTML:
<div class="panel">
<h2>Panel title</h2>
<div class="close">x</div>
<div class="content">Panel content</div>
</div>
You can use this CSS:
div.panel{
position:relative;
}
div.panel h2,
div.panel div.close,
div.panel div.content{
position:absolute;
}
<div class="panel"> will remain in the usual document flow, while each of its children will be absolutely positioned within that panel.
If you set the div to have position: relative, any child elements of the div can be absolutely positioned within the div by setting them to have position: absolute.
Example:
HTML:
<div id='panel'>
<div id='control'>I'm positioned absolutely!</div>
</div>
CSS:
#panel { position: relative; width: 300px; height: 100px;}
#control { position: absolute; top: 10px; left: 20px;