0

I am trying to put 3 divs (lets call them div1, div2 and div3) into one container div with 700px width. What I want to manage is that the content of the div1 is higher in the source code, but is visible lower at the webpage (please see attached picture). 

<div id="container">
<div id="div1">content of the div1</div>
<div id="div2">content of the div2</div>
<div id="div3">content of the div3</div>
</div>

The problem I am not able to solve is, that all 3 divs may have varibale height. So I cannot use position:absolute;top: x px; or padding-top: x px

Picture of requested layout: http://snapshot.own.cz/divs.png

EDIT:

solved using JS as suggested in comments (JS after load gets real height of div2 and sets top: value to div1)

$(document).ready(function() {
var newtop = $('#div2').height() ;
$('#div1').css("top",newtop); 
        });

<style>
#container{
    width: 700px;
    clear: both;
}
#div1{
    width: 700px;
    background: red;
    float: right;
    position:relative;
    top:20px;
}
#div2{
    width: 500px;
    height: 200px;
    background: blue;
    float: left;
    position: absolute;
}
#div3{
    width: 200px;
    background: green;
    float: left;
    position:absolute;
    left: 500px;
}
</style>

<div id="container">
<div id="div1">content of the div1</div>
<div id="div2">content of the div2</div>
<div id="div3">content of the div3</div>
</div>
j.szolony
  • 3
  • 1
  • 5
  • What is the reasoning why you don't want to have the flow of the page followed on the display? – blo0p3r Jan 29 '12 at 19:02
  • because div1 contains text relevant for the page and I want it to be higher in source code (div2 contains pictures + some generic text and div3 is contact form). – j.szolony Jan 29 '12 at 19:07
  • is this even possible? I am still trying to find solution, but no luck – j.szolony Jan 29 '12 at 19:40
  • I dont think it is possible without the use or JS. You can try here: http://jsfiddle.net/QrVDC/ – Shadow_boi Jan 29 '12 at 19:49
  • ok, so I think I will try to estimate heigh of div2 in php somehow (according to number of elements in it). EDIT: I already considered using JS to get height somehow, but I didnt like such solution. – j.szolony Jan 29 '12 at 20:07
  • thanks for suggestions, I solved it using JS. Solution added to question. – j.szolony Jan 29 '12 at 23:15

2 Answers2

1

I've tried to find a few walkarounds for what you are trying to do. But this is not possible considering what you are trying to do. Something of the sort would be doable if you were willing to set fixed heights to your elements.

This is my reasoning :

If you are going to leave the positionning relative, this means that the flow of the page is conserved. Therefore, the first item is displayed first, the second follows, etc. In order to take the first div out of the the flow of the page and place it at the bottom, you have to position it differently. If you are taking it out of the normal flow of the page, then you cannot use the pre-established height of the other elements as it is not in the same flow.

Thefeore to obtain the display you want something like this would work :

<div id="container">
    <div id="div2">
        2
    </div>
    <div id="div3">
        3
    </div>
    <div id="div1">
        <p>Some text here!</p>
    </div>
</div>

Using this css

* {
    border: 1px solid red;
}
#container {
    position:relative;
}
#div1 {
    clear: both;
    background-color: green;
    width: 100%;
}
#div2 {
    float: left;
    width: 49%;
    background-color: blue;
}
#div3 {
    float:left;
    background-color: gray;
    width: 49%;
}

If you absolutely need to have the flow of the page changed, you will need to turn to JavaScript to take the first div, and then insert it ontop of the second div on page load. See this answer for details on how to do this.

Hope this helps.

Community
  • 1
  • 1
blo0p3r
  • 6,790
  • 8
  • 49
  • 68
  • Thank you for trying and explanation. I will consider JS you mentioned, but first I will try to estimate height of div2 in php code and move div1 down. I was trying to avoid this solution as the calculation in php will probably not be accurate. But obviously I dont have much choices here. – j.szolony Jan 29 '12 at 20:17
  • If you are going to be estimating height, you are much better off doing this on the client side... using JavaScript. This way you are not taking up server time, but the processing power of the client... just a suggestion. – blo0p3r Jan 29 '12 at 20:19
  • thanks for suggestions, I solved it using JS. Solution added to question. – j.szolony Jan 29 '12 at 23:15
0

Try this code using the float element. 

<div style="width: 704px; padding: 10px;">
    <div style="border: 1px solid red; height: 200px;width: 500px; float: left"></div>
    <div style="border: 1px solid blue; height: 200px;width: 200px;float: right;"></div>
    <br />
    <div style="border: 1px solid green; height: 400px;width: 702px;float: left;"></div>
</div>

And check out this jsFiddle

jacktheripper
  • 13,953
  • 12
  • 57
  • 93
  • This gets the proper CSS layout but does not acheive the goal of the question if it is possible to get div1 to show up below div 2 and 3. – blo0p3r Jan 29 '12 at 19:57