Borders

Discussion in 'Web Design & Coding' started by k3o, Apr 11, 2006.

  1. k3o

    k3o My name is James VIP Member

    Joined:
    Feb 4, 2004
    Messages:
    413
    Likes Received:
    1
    Location:
    England
    I have finally decided to code a whole layout using pure CSS and DIVs, but I have a problem: The border in the main content box does not run right down to the bottom - it stops where the content stops. I want the border to go right down to the bottom where the footer is - how?

    [​IMG]
     
    k3o, Apr 11, 2006
    #1
    1. Advertisements

  2. k3o

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    Got a copy of the XHTML and CSS we could have a look at?
     
    S Walch, Apr 11, 2006
    #2
    1. Advertisements

  3. k3o

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    I too would like to see the code, do you have a link? There are a few ways to resolve this issue. I have had this problem in the past as well.
     
    James, Apr 11, 2006
    #3
  4. k3o

    k3o My name is James VIP Member

    Joined:
    Feb 4, 2004
    Messages:
    413
    Likes Received:
    1
    Location:
    England
    I have PM'ed you both a link to the code. I can't post it properly because it's very long, and plus my copy is hard-coded with lots of php..

    EDIT: You will notice that particularly on the front page if the right box contains more than the left box, the left border is shorter, etc..
     
    k3o, Apr 11, 2006
    #4
  5. k3o

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    What's the deal with the

    <div id="7" style="display: none;">how does this look<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    dd<br /><br />
    d<br /><br />

    In the code?

    Obviously it's to get the extra white space at the bottom, but then, that's where the border stops isn't it? I removed that and just put in <br /> tags, and then the border was fine.

    Must be som in the CSS, so I'm gonna check that now, to see if you can quite easily just kepp the code posted above.

    Edit:

    Well, I got around it by adding in the .content_right section of your CSS file a height: 259px;.

    Well, it worked for the http://www.idealcare.co.uk/beta/?page=news/main page anyway.

    Borders only follow the height of the content that it's next too from what I gather, so you have to force the height for it to go all the way down.
     
    Last edited: Apr 11, 2006
    S Walch, Apr 11, 2006
    #5
  6. k3o

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    The issue is because you have no data to fill the rest of the div. You use use the br tags or what I do is use a fully transparent image and give it a height of the desired amount. There are other work arounds as well but I don't have too much time right now to look into it.

    I may have more time to later tonight if you have not resolved it by then.
     
    James, Apr 11, 2006
    #6
  7. k3o

    truero82 Dmn Techie

    Joined:
    Apr 9, 2006
    Messages:
    4
    Likes Received:
    0
    Location:
    Urbana, IL
    truero82, Apr 11, 2006
    #7
  8. k3o

    k3o My name is James VIP Member

    Joined:
    Feb 4, 2004
    Messages:
    413
    Likes Received:
    1
    Location:
    England
    @S Walch:

    The

    HTML:
     <div id="7" style="display: none;">how does this look<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    d<br /><br />
    dd<br /><br />
    d<br /><br />
    ..is the boss testing out the admin CP by changing and posting stuff.

    --

    I need the content to change dynamically, so if I apply a height, then it will either be too short or too long for the other dynamic pages.
     
    k3o, Apr 11, 2006
    #8
  9. k3o

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    As far as I know and have seen, you have to specify the height or use an image spacer or add in breaks when using div classes. I have to do this for my personal site as I am tableless. A good site that has excellent books (every book has a few free chapters) and CSS experts is SitePoint. I'm sure they will tell you the same thing.

    I have seen work arounds with a background image. Check out CSSdrive.com to get ideas.
     
    James, Apr 11, 2006
    #9
  10. k3o

    k3o My name is James VIP Member

    Joined:
    Feb 4, 2004
    Messages:
    413
    Likes Received:
    1
    Location:
    England
    Ok, so how would I get the image spacer to fix the issue?

    Thanks for the link to CSSDrive - it is very inspirational :)
     
    k3o, Apr 11, 2006
    #10
  11. k3o

    k3o My name is James VIP Member

    Joined:
    Feb 4, 2004
    Messages:
    413
    Likes Received:
    1
    Location:
    England
    I used this article to achieve what I wanted :)
     
    k3o, Apr 13, 2006
    #11
  12. k3o

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Very nice. ALA is an excellent site.
     
    James, Apr 13, 2006
    #12
  13. k3o

    S Walch MAME 0.64 :) VIP Member

    Joined:
    Jun 2, 2003
    Messages:
    1,026
    Likes Received:
    14
    Location:
    Manchester
    lol, the funny thing is, I actually knew that was a way to get around it, and I even use it the same thing on my own site xD

    http://saturn.v21hosting.co.uk

    I use a background image, exactly as is shown on that article, to make sure the background goes all the way down the webpage, not mattering how big the browser window is
     
    S Walch, Apr 13, 2006
    #13
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.