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
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Last Hope Before Tables - 3 Column Layout and Page Border

    I've been working on this damn thing for four days now and have gotton no closer to getting an answer. Even after reading hundreds of tutorials, not understanding and getting more and more annoyed, I'm this >-< close to just using a table to do what I want.

    I am trying to make a website with the basic header, 3 columns for content, then a footer. The header works fine, but the trouble arrives in the columns as I can't get them to be the same height.

    I know there are ways to use 'faux' columns, IE hacks etc etc, but everything I read confuses me more, so if someone has a simple, easy bit of code for me to use I would be incredibly grateful.

    What I'm trying to acheive: http://img227.imageshack.us/my.php?i...itecopyro2.jpg.

    My CSS:

    Code:
    #Content
    {
        position: inherit;
        background-color: #a8b0b3;
    }
    
    #Content2
    {
        position: inherit;
        background-color: #a8b0b3;
        margin-right: 200px;
    }
    
    #LeftCol
    {
        position: absolute;
        top: 360px;
        left: 75px;
        background-color: #a8b0b3;
        width: 200px;
    }
    
    #CentreCol
    {
        position: relative inherit;
        margin-left: 200px;
        padding: 0px;
        background-color: White;
        height: 500px;
    }
    
    #CentreColContent
    {
        padding: 15px 6px 15px 6px;
    }
    
    #RightCol
    {
        position: absolute;
        top: 360px; left: 768px;
        background-color: #a8b0b3;
        width: 157px;
    }
    HTML code:

    Code:
    <div id="Content">
        
            <div id="Content2">
                <div id="RightCol">
                
                </div>
                <div id="CentreCol">
                    <div id="CentreColContent">
    
                    </div>
                </div>
            </div>
            <div id="LeftCol">
                
            </div>
        </div>
    Secondly, as can be seen from the picture above, I'm trying to get a border on the left and right sides of the page. It is currently a picture that I have repeated vertically. The left one works fine, but I can't get the right one positioned correctly, if I try to put a left: xxxpx position on it, it just disappears.

    Again, the CSS:

    Code:
    #LeftShadow
    {
        width: 50px;
        background-image: url(images/left.jpg);
        background-repeat: repeat-y;
        background-position: 28px;
        height: 100%;
        float: left;
    }
    
    #RightShadow
    {
        width: 50px;
        background-image: url(images/right.jpg);
        background-repeat: repeat-y;
        height: 100%;
        background-position: 100px;
        float: right;
    }
    and HTML:

    Code:
    <body>
    <div id="LeftShadow">
        <div id="RightShadow">
    Content........................................................
        </div></div>
    </body>
    If anyone can answer only one of these questions, I will be incredibly happy. If not, well I might have to revert to tables, which I don't want to do but I can't see any other choice after asking in 5 different forums, looking through hundreds of tutorials, following a book exactly and still not getting it to work.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello Steve887,
    Your picture isn't coming up for me. I pieced your code together but it's definitely a work in progress and I really couldn't do much with it without knowing more what your looking to do.
    Just so you know, and don't go to the dark side (tables), it is possible to do a 3column layout with CSS. I have a couple examples up... maybe one will do what your looking for?
    example1
    example2
    example3
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still doesn't work even if I copy it exactly.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,749
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    What are you copying?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ASP.NET 2.0 - Website Programming, Problem - Design - Solution
    by Marco Bellinaso
    Wrox Press

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Your layout is actually pretty easy to do. Is it a fixed width or is it fluid? Judging by the header image I'm going to say its a fixed width. If it is then check out this example: http://bonrouge.com/3c-hf-fixed.php
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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