Expand div to relative top-left position
I have this problem when I am trying to show multiple graphs (based on jsPlumb) on the same page. Since I want each graph to be next to each other on the same line, no matter how much space is available, I use a table (if I used divs with float: left, if there is not enough space, some of the divs move down on a separate line) ...
Each cell in the table now contains a main div, which in turn contains two or more node-divs. The way jsPlumb works is creating a separate div for each node. I need to position each node at a specific top / left relative to its parent div.
The problem is that the main graphDiv in each table cell does not expand to fit its content. Some of the node plots div are outside of it. I understand that when you have "absolute" positioned divs, they are not counted. But I am using "relative" positional divs with top / left coordinates. Is the same thing used? If so, what would be the best way for me to extend the table-cell / graphDiv to cover its content? (I tried all clear fixes and went through all Stack Overflow related posts, but couldn't find a solution).
Here is a link to the jsfiddle page I installed: http://jsfiddle.net/7QkB2/28/
source to share
I'm a little rusty, but I share your pain trying to get the divs to expand correctly to hide their content.
As explained on this page http://reference.sitepoint.com/css/relativepositioning , when you use relative positioning, you actually leave a hole behind where the content used to be. I would think of it almost as an optical illusion. The object still reserves the invisible block in its previous position, but it appears to have moved.
So, in your case, the 3 nodes are still stacked in the upper left corner of the graph, even though they look like they are floating outside of it. If you get rid of the absolute and relative positioning at the nodes, you will see that the table is large enough to match their original positions.
I would recommend generally using only relative position if you are only moving your content a few pixels. Why did they design the css to work this way is a mystery to me, but perhaps this is due to the limitations of the rendering engines? When you use absolute position, the object no longer has a "box" taking up space in the document. It is easy to place, but does not affect the distance of anything you observe.
I'm not sure what your exact application is, but you might need to get creative with how you specify the spacing. If you know the sizes you can always specify, but I guess you are out of luck. Are you sure you want to set the position relative to the top left corner or just relative to other nodes? I would probably only use old fashioned fields. This should allow you to specify the positions of the content that should match the table when saving the block model. Then, if you need one of the nodes to overlap, position it using absolute positioning.
source to share
Have you tried showing each div as an inline block and disabling line breaks on the enclosing div? You don't need to resort to tables if you want dynamic-width content to display horizontally without wrapping.
div.graph {
display: inline-block;
}
div.graph-container {
white-space: nowrap;
}
source to share