Discover Habbo's history
Treat yourself with a Secret Santa gift.... of a random Wiki page for you to start exploring Habbo's history!
Happy holidays!
Celebrate with us at Habbox on the hotel, on our Forum and right here!
Join Habbox!
One of us! One of us! Click here to see the roles you could take as part of the Habbox community!


Page 1 of 2 12 LastLast
Results 1 to 10 of 13
  1. #1
    Join Date
    Sep 2007
    Location
    USA
    Posts
    474
    Tokens
    0

    Default Divs Layout Coding [?]

    k so i read --ss--'s Tut and it basically started nice i was doing good then i got into my content boxes now im mad.. how do i design with putting boxes side by side instead o putting all the boxes on top of each other when coding

    tbh i wouldnt beleive he would answer a pm or it would take forever >.<

    does anyone know how i thought of a few techinques then it blew up in my face because they needed to be side by side aswell so im pretty anoyed by this dilema

    pls help?
    Post Meter
    ______________________________________________
    400 450 500 550 600 650 700 750 800 850 900-1k
    Green=Done | Orange=Almost | Red=Not Done
    ______________________________________________
    Habbo fury Coming Soon!
    My Img tag has ran away

  2. #2
    Join Date
    Dec 2006
    Posts
    7,601
    Tokens
    95

    Latest Awards:

    Default

    erm, im sure there is a better way but add:
    floateft;
    to both of the styles. im pretty sure their is a better way but that works for me

  3. #3
    Join Date
    Sep 2007
    Location
    USA
    Posts
    474
    Tokens
    0

    Default

    so float them in the direction
    like

    Navigation Float left Content Float Center and Radio Float Right?
    Post Meter
    ______________________________________________
    400 450 500 550 600 650 700 750 800 850 900-1k
    Green=Done | Orange=Almost | Red=Not Done
    ______________________________________________
    Habbo fury Coming Soon!
    My Img tag has ran away

  4. #4
    Join Date
    Dec 2006
    Posts
    7,601
    Tokens
    95

    Latest Awards:

    Default

    no, is only float left and right.

    say you had a div id named content and one called box, add float:right; to both styles, they should align next to each other. you could also use a table. that might be easier

  5. #5
    Join Date
    Feb 2008
    Posts
    14
    Tokens
    0

    Default

    Hi. if you wanted 2 divs next to each other you would do it like this

    Code:
    <div>
        <div style="width:50%; float:left;">Left Hand Box</div>
        <div style="width:50%; float:right;">Right Hand Box</div>
    </div>
    let says you want 3 divs next to each other you would do this like this

    Code:
    <div>
        <div style="width:25%; float:left;">Left Side Box</div>
        <div style="width:75%; float:right;">
            <div style="width:50%; float:left;">Middle Box!!!!</div>
            <div style="width:25%; float:right;">Right Side Box!!!!</div>
        </div>
    </div>
    the above are for example only and can be modified to how you need the divs sizing to be etc

    Ohhhhnoessss !!!
    Habbo.AM My Site Check It Out
    Love You Kayle XoXoX

  6. #6
    Join Date
    Sep 2007
    Location
    USA
    Posts
    474
    Tokens
    0

    Default

    wow thanks bunches
    +rep to Nathan *thanks a bunch* for the help
    and Jimbo For Advice

    *finally a thread i dont want to close due to arguements and anoyounces*

    *Yay 400th Post Go Me*


    Edit: Tbh i cant be bother to make a thread is there any setting to make it expand because ive had no luck with that
    Last edited by LegendOfNoob; 26-02-2008 at 12:44 AM.
    Post Meter
    ______________________________________________
    400 450 500 550 600 650 700 750 800 850 900-1k
    Green=Done | Orange=Almost | Red=Not Done
    ______________________________________________
    Habbo fury Coming Soon!
    My Img tag has ran away

  7. #7
    Join Date
    Feb 2008
    Posts
    14
    Tokens
    0

    Default

    Quote Originally Posted by LegendOfNoob View Post
    Edit: Tbh i cant be bother to make a thread is there any setting to make it expand because ive had no luck with that
    Can you explain what you mean as they should expand downward with the content

    Ohhhhnoessss !!!
    Habbo.AM My Site Check It Out
    Love You Kayle XoXoX

  8. #8
    Join Date
    Sep 2007
    Location
    USA
    Posts
    474
    Tokens
    0

    Default

    well when i try to use --ss--'s guide it doesnt expand it just sits there and runs into the other divs
    Post Meter
    ______________________________________________
    400 450 500 550 600 650 700 750 800 850 900-1k
    Green=Done | Orange=Almost | Red=Not Done
    ______________________________________________
    Habbo fury Coming Soon!
    My Img tag has ran away

  9. #9
    Join Date
    Feb 2008
    Posts
    14
    Tokens
    0

    Default

    If the are not sized properly they will overflow into the nexted div and make sure you build your content boxes inside the floating div like the following example

    Code:
    <div>
        <div id="left_box">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="bottom"></div>
        </div>
        <div id="right_cont">
            <div id="middle_box">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="bottom"></div>
            </div>
            <div id="right_box">
                <div class="top"></div>
                <div class="middle"></div>
                <div class="bottom"></div>
            </div>
        </div>
    </div>
    And CSS Like This

    Code:
    #right_cont{
        width:75%; 
        float:right;
    }
    #left_box{
        width:25%; 
        float:left;
    }
    #left_box .top{
        /*Left Inner Box Top --ss-- Code CSS*/
    }
    #left_box .middle{
        /*Left Inner Box Middle --ss-- Code CSS*/
    }
    #left_box .bottom{
        /*Left Inner Box Bottom --ss-- Code CSS*/
    }
    obviously add the css coding for the middle box and the right hand box i may of not got what your trying to do. http://habbo.am thats my layout witch is coded in divs. If i have got what your trying to do wrong i appoligise

    And to hide any overflow put into your css this on witch ever div you want it to be affected on
    Code:
    overflow:hidden;
    Last edited by NathanTBH; 26-02-2008 at 01:18 AM.

    Ohhhhnoessss !!!
    Habbo.AM My Site Check It Out
    Love You Kayle XoXoX

  10. #10
    Join Date
    Sep 2007
    Location
    USA
    Posts
    474
    Tokens
    0

    Default

    THanks i can finally finish coding a layout for me mate
    Post Meter
    ______________________________________________
    400 450 500 550 600 650 700 750 800 850 900-1k
    Green=Done | Orange=Almost | Red=Not Done
    ______________________________________________
    Habbo fury Coming Soon!
    My Img tag has ran away

Page 1 of 2 12 LastLast

Posting Permissions

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