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

Thread: <div> problem

  1. #1
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation <div> problem

    I have started this site today and already run across a problem - the layout has gone really wrong. You can find the site @ http://users.quickfox.org/~chilipie/digicheese. The code is loosely based on a layout on Glish - http://www.glish.com/css/9.asp.

    And this picture is what it should look like (I edited what I had with PSP):

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    First, give your body a container. Then, apply the following CSS:

    Code:
    #container {
    margin: 0 auto;
    text-align: left;
    width: 700px;
    }
    Modify the #menu to float left.

  • #3
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hmmmmmmm...

    Now the #menu has moved below the #main. (I've re-uploaded it, so you can see what it looks like.)

    Also, is there any way of making #menu the same height as #main?

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    engoku no anime
    Posts
    354
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Heh... Sorry... I forgot that I had resized #menu to width:148px to make it fit with the layout. I'm going to check into the height thing.

    /* Edit */

    For #menu, try giving it a height of 19.1em. That worked at 1024x768 (my normal res) and 1280x1024 (things are tiny!)
    If that doesn't work, I would play around with it.

    Remember: height and percentages don't work well, use ems for height.
    Last edited by gohankid77; 10-11-2004 at 07:18 PM.

  • #5
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect thanks! However, stupid IE ****s it up. When you hover over the top 2 links, the whole navbar jumps up, and the menu also falls short of the footer.

    (Sorry to dig this topic up again, but I thought it would be better than starting a new one.)

    Last edited by chilipie; 10-18-2004 at 05:39 PM.

  • #6
    Senior Coder chilipie's Avatar
    Join Date
    Jul 2004
    Location
    Shrewsbury, UK Age: 16
    Posts
    1,117
    Thanks
    0
    Thanked 0 Times in 0 Posts
    To solve the menu falling short of the footer is there a way of setting a different style sheet for IE, or preferably a way of making sure the content area (#main) and the menu (#menu) are always the same height?

    Any help appreciated,
    Ollie.


  •  

    Posting Permissions

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