DIV that goes through another div's perimeter?

[Aeonix]

Since I English no good. I picture send you.
How do I do?

Just kidding.
How could I put div through another divs perimeter by 20 pixels, 100 pixels or perfectly within them both? I saw that on a website, but they have ultra-spaghetti code with 50 billion wrappers (no kiddin', I scrolled down to notice that it has 11 different layers). I could use jQuery and take height of first, subtract half of own height and position absolute that. But, isn't there a better way? Less wonky, more compatible?

Someone's gotta link or example?

http://oi65.tinypic.com/28vg3k2.jpg

Because I know how you all love aliasing and Microsoft Paint.

[ryantroop]

All I see there is a container div and 3 child divs. Two relative positioned divs are block with height and width, one is absolutely positioned with appropriate margins / positions set (either with calc() on margin or top/left) - it also has a border radius of 50%

I am unsure if I understand your question correctly.. as this seems pretty straight forward.

Is this what you are talking about?
https://jsfiddle.net/08c1g4cm/

[Aeonix]

Ah, yes, you recreate the thing. But problem is, that DIV needs to position yourself regardless of height of parents.
.container .Box:first-of-type { height: 250px; }
Shows vulnerability, unfortunately height of first div will be max-height, height, min-height, 50% of document position will break it :(

I need a way to position it, adjusting to size, while it can be done in jQuery, can be done with CSS/HTML?

[ryantroop]

You will need to communicate more clearly what you are trying to accomplish.

The height of the inner boxes is irrelvant. I could have done 50% and given the container box a height, which in turn could be relative in height to another container.

Also, you clearly modified the code I provided as

.container .Box:first-of-type { height: 250px; }

is most definitely not in the fiddle I provided.

I would encourage you to play with the fiddle a bit, and learn some CSS. There are many many ways to do what you are (likely) asking using pure CSS without any javascript hackery.

If you REALLY need fluid layout and you want size indepenence, you may want to look into flex-box layouts, but they are still currently difficult to use due to cross browser compatability (and vendor prefixing).

Edit:

here is the same thing, using the container element to provide height for the inner elements:
https://jsfiddle.net/08c1g4cm/1/

The .Circle class can also be modified to take height from the parent using % but I did not know if that is what you want/need. Also, if you are going to have text, you will need some way to scale that as well (such as using em instead of px).