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!


Results 1 to 7 of 7

Thread: Me and divs!!

  1. #1
    Join Date
    Sep 2005
    Location
    East London
    Posts
    3,028
    Tokens
    0

    Latest Awards:

    Default Me and divs!!

    I am having problems with divs.

    http://91.111.82.46/DJ/

    I basically want the green box slightly under the pink box whenever any box expands.

    An experienced coder will realise what i have done wrong

    I am naff with divs, this is my first ever attempt at them.

    People that fix will be +repped

  2. #2
    Join Date
    Apr 2008
    Location
    England.
    Posts
    1,324
    Tokens
    0

    Latest Awards:

    Default

    Use containers. Would be much easier. You only have two columns so do a container for the left column, width would be 208 as thats your image width. Then make it float left. And do the same for the other column (center one) but change the width.

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

    Latest Awards:

    Default

    Err i'm confused on what exactly you want , maybe a screenie of it on how it should look like?

    Also no offence but you really need to clean your syntaxing off the coding as it's currently terrible and hard to read .

  4. #4
    Join Date
    Apr 2008
    Location
    England.
    Posts
    1,324
    Tokens
    0

    Latest Awards:

    Default

    Quote Originally Posted by --ss-- View Post
    Err i'm confused on what exactly you want , maybe a screenie of it on how it should look like?

    Also no offence but you really need to clean your syntaxing off the coding as it's currently terrible and hard to read .
    I have to agree with that last bit, your syntax needs a good wash.

  5. #5
    Join Date
    Sep 2005
    Location
    East London
    Posts
    3,028
    Tokens
    0

    Latest Awards:

    Default

    Quote Originally Posted by --ss-- View Post
    Err i'm confused on what exactly you want , maybe a screenie of it on how it should look like?

    Also no offence but you really need to clean your syntaxing off the coding as it's currently terrible and hard to read .
    Agreed i am appauling, but i do php mainly

    This is what i want:


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

    Latest Awards:

    Default

    Quote Originally Posted by Jackboy View Post
    Agreed i am appauling, but i do php mainly

    This is what i want:

    For that you will need 3 containers to position your divs in.
    The first one is the main container, make the width of this the width of what is going to be inside (The boxes , margins and padding) and have no height attribute, also add the overflow: hidden; code for it's CSS. To center it have it as
    margin-left: auto;
    margin-right: auto
    margin-top: what ever you want.

    The second container should be for the 2 smaller boxes that are going to be on the left, Set the width for this as the exact width off the nav box with no height variable. Put a float: left; tag in the CSS aswell.

    The 3rd is going to be for the main content box and have the width of it the same as what the boxe's width is. Have it floated to left with the following code; Float: right;

    For all of this to work the total width of everything must not exceed the width of the container.
    Your coding syntax should look something like this:
    HTML Code:
    <body>
    <div id="container">
     <div id="left">
      <div id="nav">
       <div id="nav_top"></div>
       <div id="nav_mid"></div>
       <div id="nav_bot"></div>
      </div>
      <div id="login">
       <div id="login_top"></div>
       <div id="login_mid"></div>
       <div id="login_bot"></div>
      </div>
     </div>
     <div id="right">
      <div id="main">
       <div id="main_top"></div>
       <div id="main_mid"></div>
       <div id="main_bot"></div>
      </div>
     </div>
    </div>
    </body>
    I hope I helped as this took forever just to type up on the spot .

  7. #7
    Join Date
    Sep 2005
    Location
    East London
    Posts
    3,028
    Tokens
    0

    Latest Awards:

    Default

    Quote Originally Posted by --ss-- View Post
    For that you will need 3 containers to position your divs in.
    The first one is the main container, make the width of this the width of what is going to be inside (The boxes , margins and padding) and have no height attribute, also add the overflow: hidden; code for it's CSS. To center it have it as
    margin-left: auto;
    margin-right: auto
    margin-top: what ever you want.

    The second container should be for the 2 smaller boxes that are going to be on the left, Set the width for this as the exact width off the nav box with no height variable. Put a float: left; tag in the CSS aswell.

    The 3rd is going to be for the main content box and have the width of it the same as what the boxe's width is. Have it floated to left with the following code; Float: right;

    For all of this to work the total width of everything must not exceed the width of the container.
    Your coding syntax should look something like this:
    HTML Code:
    <body>
    <div id="container">
     <div id="left">
      <div id="nav">
       <div id="nav_top"></div>
       <div id="nav_mid"></div>
       <div id="nav_bot"></div>
      </div>
      <div id="login">
       <div id="login_top"></div>
       <div id="login_mid"></div>
       <div id="login_bot"></div>
      </div>
     </div>
     <div id="right">
      <div id="main">
       <div id="main_top"></div>
       <div id="main_mid"></div>
       <div id="main_bot"></div>
      </div>
     </div>
    </div>
    </body>
    I hope I helped as this took forever just to type up on the spot .
    Thanks Don't i need float left? or summinnn

Posting Permissions

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