css-position

I need to create a page something like this. The blue circle is the main circle and green circles should place around the main circle. The green circles count is random (around 0 - 10). All green circles are connected to blue circle with a line. I know to draw circle in CSS. I need to know, How to place green circles around the blue circle How to connect green circles to the blue circle Is it possible to do with CSS. If not what is the way? Thank you. What you will need is a position: relative; container with child elements positioned absolute Demo Demo 2 (Using transform ) Explanation: What

Elements with position: relative , located inside table cells in a big table disappear in Internet Explorer 10 on Windows 7 in a particular case: Scroll down the page Scroll the div#scroller to the right Scroll to top All browsers work as expected, IE10 shows blank table cells At this point, resizing IE10 window will trigger correct display of cell contents. Big table, all cells identical: <td><div>Foo bar</div></td> CSS: td div { position:relative; } Here's an extremely simplified demo: http://jsfiddle.net/86BaU/ This is a known and reported bug in IE10. However, MS seems unwilling to do

I've been looking around for awhile, and I can't seem to find any fix for this issue. When an input field gains focus in mobile safari (haven't checked other browsers) a fixed element will jump due to safari putting that element in view (closer to the center). The error only occurs when a user has scrolled, if the user is still at the top of the page nothing occurs. Before & After screenshots Does anyone have a clue how to fix this? The only solution I have come across is to scroll back to the top when focused, then on blur scroll back into position... this seems like a very sloppy solution.

If I have multiple elements with the property justify-content: space-between in a flex container and I want to absolute position one of them and remove from the flex flow, as showed here: This works in Chrome but not in IE and Firefox as the absolute positioned element is considered as 0 width, but still in the flex flow: Is there a fix to this keeping the layout as it is? CodePen It turns out that all it takes is three simple steps ( Demo ) 1). Set the left and right margin to auto on each child img { margin-left: auto; margin-right: auto; } 2). Set the left margin on the first child to 0 img