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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    positioning puzzle (divs, floats, and display:table oh my!)

    I have a positioning puzzle for you here. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES!
    here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say.

    Any assistance or suggestions are welcome.

    Thanks in advance.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Okay so what are you wanting us to do? We aren't going to do your assignment for you. Post your code, maybe we can help you by telling you what you may have done wrong.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    What's the question? Our Rules specifically say not to post homework assignments if you're just looking for a quick answer.

    Edit: Aero beat me to it.

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok.
    It's only a small part of the assignment. and i'm considering this as research.
    I don't expect a complete solution.
    I've spent quite alot of time playing with it, and my lecturer was unsure of how to do it as well (he's not very onto it).

    There's also probably a very good chance what im trying to do is impossible.
    Im not even sure how i could hack together some javascript to make it work.
    (but i'm not very familiar with javascript)

    a simplified down code.
    CSS
    #world{
    display:table;
    }
    #main {
    display:table-cell;
    }
    #sidebar{
    display:table-cell;
    width:21.5em;
    }
    div.cell{
    height:20em;
    width:20em;
    position:relative; /* so things inside can be absolutely positioned in this container*/
    margin:1.5em;
    float:left;
    }

    <div id="world">
    <div id="main">
    <div class="cell">
    Stuff goes here
    </div><!--/cell--> <!-- times lots of these cells -->
    </div><!--/main-->
    <div id="sidebar>
    <div class="cell">
    Stuff goes here
    </div><!--/cell--> <!-- times lots of these cells -->
    </div><!--/sidebar-->

  • #5
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    is the table-cell a requirement? My hint to you is that careful floating or container elements will do everything you want.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,932
    Thanks
    6
    Thanked 1,041 Times in 1,014 Posts
    Exactly, float was the first thing that came to my mind.

    Red box is a div, blue and green outline are divs within the red one, and the squares are divs within the respective outline divs. Now you would float the blue outline div to the left and assign a width in order to get the green one next to it, and you would float the violet and blue squares to the left too. It’s pretty simple.


  •  

    Posting Permissions

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