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 17

Thread: Div's Again

  1. #1
    Join Date
    Sep 2006
    Posts
    2,114
    Tokens
    0

    Latest Awards:

    Default Div's Again

    Ok,

    http://virtuatv.net/land/

    the box on the right i want it to be next to the left one

    My CSS:

    PHP Code:
    #commentstop {
        
    width:390px;
        
    height:45px;
        
    z-index1;
        
    background-color#FFFFFF;
        
    positionrelative;
        
    left516px;
    }
    #commentsmid {
        
    width:390px;
        
    heightauto;
        
    z-index:2;
        
    background-color#FFFFFF;
        
    left516px;
        
    positionrelative;
    }
    #commentsbot {
        
    width:390px;
        
    height:82px;
        
    z-index:3;
        
    background-imageurl(images/smallbot.jpg);
        
    left516px;
        
    positionrelative;


    My HTML

    HTML Code:
    <div id="friendstop">Content</div>
    <div id="friendsmid">hellooooo<br />
    <br />
    booooooo</div>
    <div id="friendsbot"></div>
    <div id="commentstop">Content</div>
    <div id="commentsmid"></div>
    <div id="commentsbot"></div>
    Thanks +rep for help

    Moved by Hitman (Forum Moderator) from Designing & Development: Please post in the correct forum next time, thanks.
    Last edited by Hitman; 28-03-2008 at 04:10 PM.
    Looking for a good desiner to design a social networking template.

    PM me.

  2. #2
    Join Date
    Mar 2008
    Posts
    779
    Tokens
    0

    Default

    If you put each box in it's own overall container, such as your have for the friends box. If you put the top, middle and bottom divs into a global div with an ID/class as "friends" then make friends float: left; then so the same for the comments box but this time float: right;. See if that helps.

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

    Latest Awards:

    Default

    pretty much what klydo said.

    get rid of the z-indexes and make a seperate box for the whole of the box. do this for both and float both left and make the very bottom div clear: both

  4. #4
    Join Date
    Sep 2006
    Posts
    2,114
    Tokens
    0

    Latest Awards:

    Default

    Quote Originally Posted by Klydo View Post
    If you put each box in it's own overall container, such as your have for the friends box. If you put the top, middle and bottom divs into a global div with an ID/class as "friends" then make friends float: left; then so the same for the comments box but this time float: right;. See if that helps.
    Could you elaberate?

    I sort of no what you mean, bit still a little confused.
    Looking for a good desiner to design a social networking template.

    PM me.

  5. #5

    Default

    Your a div

    Edited by --ss-- (Forum Super Moderator): Please do not be rude.
    Last edited by --ss--; 28-03-2008 at 04:33 PM.

  6. #6
    Join Date
    Mar 2008
    Posts
    779
    Tokens
    0

    Default

    Okay no idea why Hitman moved it here, as this isn't web design it's web coding, but still anyway...

    Well basically at the moment you have;

    HTML Code:
    <div id="friendstop">Content</div>
    <div id="friendsmid">hellooooo<br />
    <br />
    booooooo</div>
    <div id="friendsbot"></div>
    First change that to;

    HTML Code:
    <div id="friends">
    <div id="friendstop">Content</div>
    <div id="friendsmid">hellooooo<br />
    <br />
    booooooo</div>
    <div id="friendsbot"></div>
    </div>
    That puts it in it's own container div. You then make it's CSS like so;

    Code:
    #friends {
    float: left;
    width: 390px;
    }
    Do the same for comments, but this time float: right; instead.

  7. #7
    Join Date
    Aug 2005
    Location
    London
    Posts
    9,773
    Tokens
    146

    Latest Awards:

    Default

    You're using relative positioning with left/right values which isn't a good idea , use float tags instead .
    Also put all your boxes into mini containers .

  8. #8
    Join Date
    Sep 2006
    Posts
    2,114
    Tokens
    0

    Latest Awards:

    Default

    Quote Originally Posted by Klydo View Post
    Okay no idea why Hitman moved it here, as this isn't web design it's web coding, but still anyway...

    Well basically at the moment you have;

    HTML Code:
    <div id="friendstop">Content</div>
    <div id="friendsmid">hellooooo<br />
    <br />
    booooooo</div>
    <div id="friendsbot"></div>
    First change that to;

    HTML Code:
    <div id="friends">
    <div id="friendstop">Content</div>
    <div id="friendsmid">hellooooo<br />
    <br />
    booooooo</div>
    <div id="friendsbot"></div>
    </div>
    That puts it in it's own container div. You then make it's CSS like so;

    Code:
    #friends {
    float: left;
    width: 390px;
    }
    Do the same for comments, but this time float: right; instead.
    Thanks for the help

    Added exactly what you said and i got

    http://virtuatv.net/land/ :S
    Looking for a good desiner to design a social networking template.

    PM me.

  9. #9
    Join Date
    Mar 2008
    Posts
    63
    Tokens
    0

    Default

    Quote Originally Posted by CharneHolly View Post
    Your a div

    Edited by --ss-- (Forum Super Moderator): Please do not be rude.
    You're***

    Edited by Hitman (Forum Moderator): Please don't post pointlessly.
    Last edited by Hitman; 28-03-2008 at 05:10 PM.

  10. #10
    Join Date
    Aug 2005
    Location
    London
    Posts
    9,773
    Tokens
    146

    Latest Awards:

    Default

    Quote Originally Posted by Ini View Post
    Thanks for the help

    Added exactly what you said and i got

    http://virtuatv.net/land/ :S
    You will have to have a main container div around all the sub divs which contains the max width you want it to be , You can also you margin-left / margin-right to position the spacing between the divs about .

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
  •