Need help with a layout !

Discussion in 'Scripts, 3rd Party Apps, and Programming' started by DefecTalisman, Jan 1, 2008.

Thread Status:
Not open for further replies.
  1. DefecTalisman

    DefecTalisman Community Advocate Community Support

    Messages:
    4,148
    Likes Received:
    5
    Trophy Points:
    38
    For the past 3 days I have been boggling myself with CSS. I am trying to achieve a basic 3 column layout with a header and a footer.
    What is stumping me (besides the fact that every browser except Mozilla has trouble with CSS) is that I can't get the footer or any div tags after the columns to adjust to the length of the longest column.
    It only moves in regard to one column(the one that isn't floating or absolute).

    If anyone could help me out with this, without asking me to post the (sad) script's if have tried, I am willing to slide credits to anyone that aids/helps/sorts out my situation.
     
  2. Jober68

    Jober68 Member

    Messages:
    63
    Likes Received:
    0
    Trophy Points:
    6
    If you want it to be something like

    Header
    column 1 Column 2 Column 3
    Footer


    Then I would recommend using a table and using td and tr with colspan for the header and footer. Then you can make classes for your css to make each column/footer/header different if you so desire.

    If you need anymore help feel free to PM me
     
    Last edited: Jan 10, 2008
  3. curt15

    curt15 New Member

    Messages:
    96
    Likes Received:
    0
    Trophy Points:
    0
    DONT USE TABLES WHEN YOU CAN USE CSS!!!

    If you need help, I'm more than willing to help. Normally If it doesn't work in Firefox, that you have got it wrong somewhere. If I can see the code, then I can help out. :)
     
  4. DefecTalisman

    DefecTalisman Community Advocate Community Support

    Messages:
    4,148
    Likes Received:
    5
    Trophy Points:
    38
  5. bonzo meier

    bonzo meier Member

    Messages:
    47
    Likes Received:
    0
    Trophy Points:
    6
    hm.

    have you tried assigning any kind of width to the footer-div?

    Code:
     .footer_wrapper {
    	margin:auto;
    	border:groove;
    	padding: 2px;
    	background:#990099;
            width: 100%;   /* or 760px or how wide you want the div to be /*
    } 
    anyway, to achieve the layout you intend I´d use css as follows:

    Code:
    .wrapper {width:760px;}
    .header {width: 760px; float: left; clear: right;}
    .leftcolumn {width: 200px; float:left; clear: none;}
    .middlecolumn {width: 350px; float:left; clear: none;}
    .rightcolumn {width: 200px; float:left; clear: right;}
    .footer {width: 760px; float: left; clear: left;}
    
    this basically is it. hope you like my suggestion.
    peace, bonzo
     
  6. worthynotes

    worthynotes New Member

    Messages:
    5
    Likes Received:
    0
    Trophy Points:
    0
    I only found one way to get the footer to stay at the bottom of the page with the other columns being the right length. Unfortunately I can't find the site I got the idea from now, but it works on my website. Obviously things can be altered to the way you want them, height of some elements etc. but it's the basic idea. It's a 3 column layout with a header and a footer.

    Here's the HTML:
    Code:
    <html>
    <body>
    <div id="nonbottom"> // everything that's not in the footer
    <div id="header">    
    Heading here
    </div>            
    <div id="left">
    Left stuff
    </div> 
    <div id="right">
    Right stuff
    </div>
    <div id="center">
    Center stuff
    </div>
    </div>              //end of everything not in footer
    <div id="bottom">
    Footer here
    </div>
    </body>
    </html>
    
    And here's the CSS:
    Code:
    html {
    	height: 100%;
    }
    
    body {
    	height: 100%;
    }
    
    #header {
    	margin: 20px;
    	padding: 10px;
    	height: 16%;
    	text-align: center;
    }
    
    #left {
    	position: absolute;
    	left: 15px;
    	top: 250px;
    	width: 12%;
    }
    
    #center {
    	margin-top: 30px;
    	margin-left: 18%;
    	margin-right: 18%;
            margin-bottom: 35px;
    }
    
    #right {
    	position: absolute;
    	right: 20px;
    	top: 250px;
    	width: 12%;
     }
    
    #bottom {
    	text-align: center;
    	position: relative;
    	margin-top: -8em;
    }
    
    #nonbottom {
    	position: relative;
    	min-height: 80%;
            margin-bottom: 150px;
    }
    
    * html #nonbottom {
    	min-height: 100%;
            margin-bottom: 150px;
    }
     
  7. DefecTalisman

    DefecTalisman Community Advocate Community Support

    Messages:
    4,148
    Likes Received:
    5
    Trophy Points:
    38
    worthynotes : that code only adjusts the footer to the center div. If there is a whole load of text in the side div's they just overlap the footer.

    bonzo meier : Thank you very much, that is exactly what I was looking for. Simple but works well.
     
Thread Status:
Not open for further replies.

Share This Page