Two floating divs; Won’t stay on its position.

[Annihlator]

Hello again,

I'm again fighting with the same page ( http://lmsouwe.n10.nl/LMSouwe2 )
If going to "The Vault" on the menu, the main content div will be divided in two,
the left one is supposed to become a tree-structured navigation further down the road, the right side should display the content selected in the tree menu on it's left.

Using some (in my opinion) quite filthy tricks to be able to stretch the left div i managed to stretch the darkened background. And the right div seems to align also fine (you can see this is if you open the url),
untill...
When the text on the right div is overflowing the size left available due to the other div, it simply starts to float below the left div where it's content ends...

Some excerpts, from styles.css;

div#main{
    padding:0px;
    position: relative;
    top: 32px;
    margin-left:32px;
    margin-right:32px;
    height:auto;
    background-image:url("img/stoneh.bmp");
    box-shadow:inset 3px 3px 1px rgba(0,0,0,0.3);
    -webkit-box-shadow:inset 3px 3px 1px rgba(0,0,0,0.3);
    -moz-box-shadow:inset 3px 3px 1px rgba(0,0,0,0.3);
    border: 2px solid #444;
    min-height:300px;
    z-index:1;
    overflow:auto;
}

div#mainbg{
    position: relative;
    padding-bottom:64px;
    margin-bottom:128px;
    top: 32px;
    margin-left:96px;
    margin-right:96px;
    height:auto;
    background-image:url("img/cobble.bmp");
    border: 2px solid #444;
    box-shadow:5px 5px 2px #000;
    -moz-box-shadow: 5px 5px 2px #000;
    -webkit-box-shadow: 5px 5px 2px #000;
}

div#vaultleft{
    float:left;
    clear:both;
    padding:8px;
    top:0px;
    bottom:0px;
    width:250px;
    padding-bottom:600px;
    margin-bottom:-600px;
    z-index:1;
    border-right: 2px solid #444;
    background-color:rgba(100,100,100,0.4);
}
div#vaultright{
    padding:8px;
    float:left;
    top:0px;
    left: 250px;
    z-index:1;
}
div#container{
    overflow:hidden;
    min-height:300px;
}

In the .php the current nesting is like;

<div id="mainbg">
<div id="main" class="Charybdis">
<div id="container">
<div id="vaultleft">

CONTENT ON THE LEFT

</div>
<div id="vaultright">

CONTENT ON THE RIGHT

</div>
</div>
</div>
</div>

Does anyone maybe have a suggestion how i could fix this kind of overlap?

[Excavator]

Hello Annihlator,
Have a look at how simple a 2 column layout can be built - http://nopeople.com/CSS%20tips/simpl...umn/index.html

And you are right, that may not be the best way to make your left column fill the space inside #container. The best and easiest method might be Faux Columns.

You could also have a look at this equal height solution.

[Kor]

Yeap. This is one of the CSS 2 weak points (corrected in CSS 3, I think, but CSS 3 is not entirely cross-browser, so far). And this might be the only reason for you can use a simple TABLE element, with a row and two cells instead of 2 floating DIVs. I also avoid tables in favor of floated divs, but sometimes you should use the simplest method, even if it looks rusty

[Annihlator]

The method using Aside (third link posted by Excavator) looks quite promising to me, however it makes me worried if it won't conflict in some (mainly older) browsers... some testing will have to point this out.

Thus far i'm trying my best with this site to learn methods to try to keep a similar presentation across as many browsers as possible, thus far this has been the hardest for keeping things reasonable for an I.E. user, and the iPad also usually seems to fork some things up. Let's hope i can use this method in a cross-browser-friendly way

I really am trying my best to refrain from using tables, since so oftenly my head has been bashed in when i did use these, so first i'm trying these other solutions.

I'm affraid (unless i'm understanding the technique wrong) Faux Columns isn't going to help me much, i really need the left (navigation) div to look a little different, using faux columns i would probably need to make a pre-sized background image, which doesn't seem very flexible to me as you can see i'm currently darkening that area using RGBa.

I'm thus far most annoyed by css2 that if you make a div absolutely positioned, it seems impossible to make it increase it's bounds to it's parents true size when using relative positioning it is too prone to being sized in height wrongly unless using the marging-padding trick i already used.



Just to make sure for if all else fails (or works more miserably); Could you name a specific reason why it would wrong to use a table in this situation?


Now first going to tinker with the aside and section tags


[edit] Seems to be working fine thus far on FF, Chrome and Android mobile browser, will have to wait untill im home to test on the iPad.

In any case, thanks for the tip to these two tags! seems to have solved my problem

[Excavator]

Originally Posted by Annihlator

The method using Aside (third link posted by Excavator) looks quite promising to me, however it makes me worried if it won't conflict in some (mainly older) browsers... some testing will have to point this out.

Use the method layed out in that third link but instead of aside and section, you would be better off to use normal div elements.

If you instist on using the new HTML5 elements, have a look at this page for some compatability suggestions, and this page that describes the new elements and their uses.