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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post

    Center layout and make layout "dynamic"

    Hi,

    I have 2 questions. First, how do I center the entire layout of this page?
    Second, how do I make it so that the page resizes (at the bottom) based on the amount of comments?

    The code for the page is attached

    The site is here

    Thanks for your help!

    PS. The design is a work in progress
    Attached Files Attached Files

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Your css code is a mess... you need to collect each element/class/id into a single definition. Right now you have multiple body definitions, and many definitions that are unneccessarily overwriting each other (specifically your div#container).

    This will center your page horizontally:
    Code:
    div#container
    {
    margin: 0 auto;
    }
    To have it expand vertically as your content expands, all you need to do is not specify a height for your content container element(s), and make sure you clear and floats or position: absolutes.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks, will try and get back to you

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    I have changed the code like you said but it still does not work and the layout is a bit messed up.

    If you could take a look at the attached code, that would be great!
    Attached Files Attached Files

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Try
    Code:
    div#container {/*5x6.php (line 178)*/
    width:962px; /*remove all other styles */
    margin:0 auto;
    position:relative;
    }
    #layout {/*5x6.php (line 96)*/
    background-color:#999999;
    border:thin none #000000;
    /*left:auto;
    margin:0pt auto;
    right:auto;
    top:auto;
    width:926px;*/
    }
    PS: make sure that there is no divitis
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    Ill try that, thanks!
    Attached Files Attached Files

  • #7
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thanks for the reply!

    I tried that and it doesn't quite seem to work.

    The code is attached to above post

    Thanks for your help!

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    I tried that and it doesn't quite seem to work.

    The code is attached to above post
    I'm not testing with the attached code, rather directly on the website with the help of firebug. Which is your browser?

    btw, there are many errors in your markup, see http://validator.w3.org/check?uri=ht...Inline&group=0
    Fix them first.
    Last edited by abduraooft; 11-08-2008 at 04:17 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    New Coder
    Join Date
    Jun 2008
    Posts
    93
    Thanks
    12
    Thanked 1 Time in 1 Post
    I am using Firefox 3.0.3


  •  

    Tags for this Thread

    Posting Permissions

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