2

I am wondering if it is possible to use only HTML and CSS (without any Javascript) to achieve the following:

|--div1-----------------|
|         |--div2------||
|         |            ||
||--div3-||            ||
||       ||____________||
||       |              |
||       |              |
||_______|              |
|_______________________|
  • div1 contains div2 and div3.
  • div2 is all the way on the top and to the right of diff3
  • div3 is all the way on the left and its top starts halfway (or some other configurable percentage) down the height of div2.
  • The sizes of div2 and div3 are not known. I am not asking for the obvious solution of hardcoding this using absolute positions. The solution I'm looking for must work for divs of arbitrary sizes.

More generally: Is there is a way to specify the position of an element by referring to the position and size of another element, without using Javascript?

EDIT: The goal of the example above is that div1 automatically expands to fit div2 and div3 after they have been positioned as required, thus the size of div1 is also not known in advance.

EDIT2: To put the question differently: Is there some way of specifying a style similarly to this "magic" CSS:

#div2 { ... }
#div3 {
   position absolute;
   top: div2.height/2;
}

perhaps using calc()?

EDIT3: div2 and div3 cannot be nested inside each other.

Dimitar Asenov
  • 24,986
  • 1
  • 16
  • 20
  • sizes and positions are different things. and size can affect position, you'd need to say what the implications should be in your case, as of right now using `position:absolute`and percentages should suffice but you seem to rule that out? – Grant Thomas Nov 26 '12 at 13:06
  • No, this wouldn't be possible in pure CSS unless `div2`'s height was in some way assigned by, or proportional to, `div1`. But even then the position of `div3` would be in relation to `div1`, *not* `div2`. – David Thomas Nov 26 '12 at 13:06
  • I don't understand what you need here, could you explain further? Setting div2 and 3 to absolute with top, right and left respectively set in percentages would give you exactly what you need but you say you don't want it "hardcoded" - even though this would work for arbitrary div sizes. – agryson Nov 26 '12 at 13:08
  • @agryson Assuming you don't know the size of div2 and div3, how will your solution work? – Dimitar Asenov Nov 26 '12 at 13:12
  • Could this be done with percentage padding and margin on Div 2 and 3? This may work providing you are allowed to hardcode a height into Div 1.. – Calvin Nov 26 '12 at 13:14
  • Naturally, their sizes need to be accomodated by the parent div1, but provided they both fit (or worst case sccenario set a max-width to 50% for each), the positions can easily be set using percentages and absolute positioning (as already mentioned by Grant Thomas) – agryson Nov 26 '12 at 13:17
  • The problem @Mitko is that the parent is the limiting factor here, as mentioned here: http://stackoverflow.com/questions/804926/make-outer-div-be-automatically-the-same-height-as-its-floating-content you'll always have to hide overflow from divs 2 and 3... – agryson Nov 26 '12 at 13:20
  • 1
    @agryson You are right. The parent shouldn't actually play any role here and div2 and div3 should always be positioned as outlined in the sketch above. I adjusted my question to reflect this. – Dimitar Asenov Nov 26 '12 at 13:28

3 Answers3

1
<div>
<div style="float:left; width: 50%; margin-top: 100px; height: 300px;"></div>
<div style="float:left; width: 50%; height: 300px;"></div>
</div>
Mantas Vaitkūnas
  • 704
  • 1
  • 7
  • 17
  • 1
    But '[the] sizes of div2 and div3 are not known.' So yes, this works for those heights, but requires 'hard-coding,' which the OP apparently doesn't want, or can't use. – David Thomas Nov 26 '12 at 13:12
  • @mantas-vaitknas This is not what I want, since you assume a particular size of the divs. – Dimitar Asenov Nov 26 '12 at 13:17
0
<div id="div1" style="border:thin red solid; width:600px; margin-left:300px">
    <div style="height:700px; width:300px; border:thin solid green;float:right; position:relative">
        <div style="border:thin solid black; height:200px; width:290px; top:50%; position:absolute; margin-left:-300px"></div>
    </div>
<div style="clear:both"></div>
</div>
S. Swaroop
  • 411
  • 1
  • 6
  • 17
  • This doesn't quite work for me in FF 17. The resulting page is two screens wide and the divs aren't positioned appropriately. You seem to also assume that the sizes of div2 and div3 will relate in a particular way, which is not the case. – Dimitar Asenov Nov 26 '12 at 13:20
  • I had missed a quotation mark earlier. It now works. I have tested it in chrome and firefox. What do you mean by "relate in a particular way" ? the whole page has width of 100%. It has 2 divs. So the width has to split in some way. I did it with 39% and 60%. You can choose 40-60 if you like. add border attribute to each div and check if your required design is met – S. Swaroop Nov 26 '12 at 13:27
  • You assume that div1 is the size of the page, which was not my intention. Div1 should just fit the size of the other two divs. I've edited the question to reflect this. – Dimitar Asenov Nov 26 '12 at 13:35
  • try the new code. style for div1 is just for demo. all values are demo only. try and see if this fits your purpose. Let me know if it doesn't. Seems an interesting problem to solve :) – S. Swaroop Nov 26 '12 at 14:34
  • When you say size of div1 is not fixed do you mean the height or width also ? Because when height is not specified, the div takes the height of the content but when width is not mentioned and some floating divs are used then the parent div takes the maximum size available for it, not the sum of the width of each sub-divs. (only when some floating divs are used) – S. Swaroop Nov 26 '12 at 14:42
  • Unfortunately this will not work for my case. The core issue is that div2 and div3 cannot be nested as they are in your solution. I've updated the question yet again to reflect this. My question is more theoretical, I do not currently need to do this (but might need it in the future). I have a desktop application where it is possible to define such a relationship between graphical elements and was wondering if this can be ported to HTML+CSS (no javascript). – Dimitar Asenov Nov 26 '12 at 16:35
0

The closest approximation I can get is this:

#div1{
   position: relative;
   overflow: hidden;
}

#div3 {
   position absolute;
   top: 50%;
   left: 0;
   max-width: 50%;
   max-height: 50%;
}

#div2 {
   position: absolute;
   top: 0;
   right: 0;
   max-width: 50%;
}

Problems with this approach wrt to OP's question is that the parent div's size is the constraining factor and we're forced to restrict the maximum size of the children. But provided that the children do fit in the parent, the above CSS should provide the desired outcome.

agryson
  • 297
  • 2
  • 9
  • PROBLEM: this will bring div3 to halfway down the height of div1, NOT div2... I'm stumped for the moment on that part... – agryson Nov 26 '12 at 13:27