Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2012
    Location
    Netherlands
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts

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

    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;

    Code:
    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;
    Code:
    <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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Annihlator (05-11-2012)

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    New Coder
    Join Date
    Apr 2012
    Location
    Netherlands
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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
    Last edited by Annihlator; 05-11-2012 at 11:33 AM. Reason: Update

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by Annihlator View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •