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> layout

  1. #1
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts

    <DIV> layout

    Hiya,

    I'm using a template I got from one of those free template websites.

    This is the site (its just a temporary one): www.yourleagueonline.com/yleague

    Now you will see that the content are is split into 3 <div>'s - left, right, and main.

    Here is where the CSS file is located: www.yourleagueonline.com/yleague/lib/style.css

    My problem is that I want to remove the right side as I want to place it on the left.

    So to attempt this I did the following:

    a) Removed <div id="right"> content </div> from the index file.
    b) Removed #right { content } from the style sheet.

    Because the #main { width is set to auto I figured this would just take up the remainder of the room.

    However instead what it did, was just take away the menu options from the right, but left just a black strip 170px in width.

    Can someone have a look at the 2 source pages and give any suggestion.

    Thanks in advance!

    Taylor.

    PS. Before anyone says anything - the big black space up top is for the logo, which has yet to be created! lol
    Last edited by Taylor_1978; 12-04-2005 at 06:16 PM.

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Location
    Nashville
    Posts
    202
    Thanks
    0
    Thanked 0 Times in 0 Posts

    question

    ok.. you will want to modify this block in your css ->

    #main {
    background: #fff;
    border: 1px solid #393939;
    margin: 2px 170px 0 170px;
    padding: 0;
    width: auto;
    }

    See how the margin has it's left and right margins set to 170px - you want to change the 2nd 170 to say.. 0px

    #main {
    background: #fff;
    border: 1px solid #393939;
    margin: 2px 0px 0 170px;
    padding: 0;
    width: auto;
    }
    Last edited by macmonkey; 12-04-2005 at 06:43 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    Simple enough..

    Thanks mac!

    Taylor.

  • #4
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts

    Another question..

    Okay so my original question got answered.. but I have a further problem also to do with DIV so I kept it here rather than make a new post..

    Anyway...

    If you take a look at the following page:

    http://www.yourleagueonline.com/ylea...e=ladder&id=bg

    And look at the main content area. You will see that the page does not go all the way down.

    How to I overcome this? I want the length of the main DIV to be the same if not more than the left DIV.

    Any suggestions much appreciated!

    Thanks in advance!

    Taylor.
    Last edited by Taylor_1978; 12-05-2005 at 04:05 PM.

  • #5
    Regular Coder
    Join Date
    Jun 2003
    Location
    Australia
    Posts
    528
    Thanks
    8
    Thanked 8 Times in 8 Posts
    I've temporarily stuck this:

    <p>&nbsp;</p>
    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>


    At the bottom of it to make sure the main content goes longer than the left side - but obviously this is not really an ideal solution.. but will do for now until someone can show me how to fix this

  • #6
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    2 Ways of doing this. One of them should fix the problem.
    Either make your height longer
    (example >>>) height: 180px; to height: 300px;

    Or use an autoflow to use the rest of the page like this.

    overflow: auto;

    Use it in the css like this

    .events {
    height: 180px;
    width: 280px;
    margin: 20px auto;
    background: #CCC;
    padding: 20px;
    overflow: auto;
    }

    If either doesn't work I have no clue!!


  •  

    Posting Permissions

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