Announcement

Collapse
No announcement yet.

CSS - Bottom Align

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS - Bottom Align

    With CSS, how do you position a <DIV> at the very bottom of the page? I have a page right now with 3 absolute positioned <DIV>'s, and I need one 100% width div under all these, at the bottom. Is this possible? I have it working on the table version of the layout, but I can't get it working with CSS. Any ideas?

    http://www.starcraftsector.com/layout7.0/main.shtml
    "63,000 bugs in the code, 63,000 bugs, you get 1 whacked with a service pack, now there's 63,005 bugs in the code."
    "Before you critisize someone, walk a mile in their shoes. That way, when you critisize them, you're a mile away and you have their shoes."
    Utopia Software - Current Software: Utopia News Pro (news management system)

  • #2
    You should ask this on sitepoint.com, you will be pointed to Paul O'B's 3 column CSS layout. I would point you to it, but I don't know the url.

    Comment


    • #3
      Sorry I cannot help you, but this is something similar. Today I finished my first tableless template. I still need to do a little code tweaking and get it compliant, but I am proud of my first CSS tempalate

      http://b2.pdwebs.com/
      Trent Gillespie Mod Theater Gillespie Photography

      Comment


      • #4
        try this one, if you still have trouble. Althoug I haven't tested much.
        Code:
        body {
        	background-color: #000;
        	margin: 0;
        	font-family: verdana, arial, helvetica, sans-serif;
        	font-size: 10px;
        	padding: 0;
        }
        a:link, a:visited, a:active {
        	color: #45ACF6; 
        	text-decoration: none; 
        }
        a:hover	{
        	color: #20D9F3; 
        }
        #page {
        	width: 780px;
        	min-height: 1100px;
        	margin:0 auto 0;
        }
        #header {
        	width: 100%;
        }
        #leftmenu {
        	float:left;
        	background-image: url('images/scs_cbg.jpg');
        	background-repeat: repeat-y;
        	width: 210px; /* IE Workaround - Overlarge Menu */
        	color: #9CBFDB;
        	padding-top: 13px;
        	height: 100%;
        }
        .leftmenuitems {
        	padding-left: 8px;
        	display: block;
        	line-height: 1.8em; 
        	margin-bottom: 15px;
        }
        #rightmenu {
        	float:right;
        	color: #9CBFDB;
        	width: 140px;
        	padding-top: 10px;
        }
        .rightmenuitems {
        	margin-bottom: 15px;
        }
        #rightmenu h1 {
        	text-align: center;
        	font-size: 12px;
        }
        #content {
        	float:left;
        	width: 425px;
        	padding-top: 13px;
        	color: #9CBFDB;
        }
        #content h1 {
        	font-size: 24px;
        	color: #45ACF6;
        	margin-bottom: 5px;
        }
        #footer {
        	width: 100%;
        	clear: both;
        }

        Comment


        • #5
          Originally posted by LeeCHeSSS
          You should ask this on sitepoint.com, you will be pointed to Paul O'B's 3 column CSS layout. I would point you to it, but I don't know the url.
          Do you mean this?

          Comment


          • #6
            Originally posted by tantei3
            try this one, if you still have trouble. Althoug I haven't tested much.
            Code:
             body {
             	background-color: #000;
             	margin: 0;
             	font-family: verdana, arial, helvetica, sans-serif;
             	font-size: 10px;
             	padding: 0;
             }
             a:link, a:visited, a:active {
             	color: #45ACF6; 
             	text-decoration: none; 
             }
             a:hover	{
             	color: #20D9F3; 
             }
             #page {
             	width: 780px;
             	min-height: 1100px;
             	margin:0 auto 0;
             }
             #header {
             	width: 100%;
             }
             #leftmenu {
             	float:left;
             	background-image: url('images/scs_cbg.jpg');
             	background-repeat: repeat-y;
             	width: 210px; /* IE Workaround - Overlarge Menu */
             	color: #9CBFDB;
             	padding-top: 13px;
             	height: 100%;
             }
             .leftmenuitems {
             	padding-left: 8px;
             	display: block;
             	line-height: 1.8em; 
             	margin-bottom: 15px;
             }
             #rightmenu {
             	float:right;
             	color: #9CBFDB;
             	width: 140px;
             	padding-top: 10px;
             }
             .rightmenuitems {
             	margin-bottom: 15px;
             }
             #rightmenu h1 {
             	text-align: center;
             	font-size: 12px;
             }
             #content {
             	float:left;
             	width: 425px;
             	padding-top: 13px;
             	color: #9CBFDB;
             }
             #content h1 {
             	font-size: 24px;
             	color: #45ACF6;
             	margin-bottom: 5px;
             }
             #footer {
             	width: 100%;
             	clear: both;
             }
            Awesome, thanks a ton. It works. Can anyone check and make sure it works in Safari?
            "63,000 bugs in the code, 63,000 bugs, you get 1 whacked with a service pack, now there's 63,005 bugs in the code."
            "Before you critisize someone, walk a mile in their shoes. That way, when you critisize them, you're a mile away and you have their shoes."
            Utopia Software - Current Software: Utopia News Pro (news management system)

            Comment


            • #7
              Originally posted by CeleronXT
              Awesome, thanks a ton. It works. Can anyone check and make sure it works in Safari?
              That's good.
              Do you know iCapture? Try and check how your site looks in safari.
              This is a sample: http://capture.danvine.com/results/58360.png

              Comment


              • #8
                Originally posted by tantei3
                That's good.
                Do you know iCapture? Try and check how your site looks in safari.
                This is a sample: http://capture.danvine.com/results/58360.png
                Cool, that's an awesome service, the only problem being I can't see whether or not the bottom of the page worked correctly.
                "63,000 bugs in the code, 63,000 bugs, you get 1 whacked with a service pack, now there's 63,005 bugs in the code."
                "Before you critisize someone, walk a mile in their shoes. That way, when you critisize them, you're a mile away and you have their shoes."
                Utopia Software - Current Software: Utopia News Pro (news management system)

                Comment

                Related Topics

                Collapse

                Working...
                X