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
    Dec 2006
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts

    footer positioning problem

    i am pastin my css for u to look at... my problem is i have a header, content and footer parts....so when i am adding stuff in the content div, the div expands and the footer stays right there overlappin with the div content...how do i make the footer flexible so that it moves along with the div when i add stuff to the content div....

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    body {
    	background-color: #369;
    }
    
    #header {
    	
    	position:absolute;
    	left:0px;
    	top:0px;
    	width:850px;
    	height:150px;
    	z-index:1;
    	background-color: #FFF;
    	font-family: "Times New Roman", Times, serif;
    	text-align: left;
    	font-size: x-large;
    	font-style: italic;
    	color: #C30;
    }
    
    #header a  {
    
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-family: Verdana;
    font-size: 14px;
    
    }
    
    #header a:visited  {
    	color: #FFF;
    	text-decoration: none;
    	font-weight: bold;
    }
    
    #header a:hover  {
    
    color: #cc0000;
    text-decoration: none;
    font-weight: bold;
    
    }
    
    
    .HorizLinks  {
    	position: absolute;
    	top: 115px;
    	left: 0px;
    	width: 850px;
    	background-color: #FF9900;
    
    }
    .HorizLinks ul { 
    
    margin: 0px; 
    
    }
    
    
    
    .HorizLinks li {
    
    margin: 0px 55px 0px 50px;
    list-style-type: none;
    display: inline;
    	
    }
    
    	
    #master {
    	
        width: 850px;
    	margin-top: 0px;
    	margin-right: auto;
    	margin-bottom: 0px;
    	margin-left: auto;
    	position: relative;
    	left: 0px;
    	top: 0px;
    	background-color: #333333;
    	
    }
    #content {
    	position:absolute;
    	left:0px;
    	top:150px;
    	width:850px;
    	height:460px;
    	z-index:2;
    	background-color: #FFFFFF;
    }
    #footer {
    	position:absolute;
    	left:0px;
    	top:590px;
    	width:850px;
    	height:20px;
    	z-index:3;
    	background-color: #666;
    }
    #one {
    	background-color: #FFF;
    	font-size: 13px;
    }
    #two {
    	background-color: #FFF;
    	text-align: left;
    }
    .news {
    	font-weight: bold;
    }
    .newclient {
    	font-weight: bold;
    }
    #master #content #two table tr td strong {
    	text-align: right;
    }
    #master #content #two table tr td p {
    	font-size: 13px;
    }
    thanx

  • #2
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Massachusetts
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    With your absolute positioning, you will run into that issue. I'd suggest using another form of positioning.

    Looking further into your CSS, you have div's overlapping everywhere. Is this a project, or an assignment?

  • #3
    New Coder
    Join Date
    Dec 2006
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abchase View Post
    With your absolute positioning, you will run into that issue. I'd suggest using another form of positioning.

    Looking further into your CSS, you have div's overlapping everywhere. Is this a project, or an assignment?

    an assignment.....i have div's overlappin coz i saw a video on youtube and followed that.....what shud i do to avoid overlappin divs.....

  • #4
    New to the CF scene
    Join Date
    Jan 2010
    Location
    Massachusetts
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd start with changing your positioning. If you do need to have absolute, then remember your sizes and positions.

    IF:
    #header is-
    left:0
    top:0
    height:150
    width:850

    Then to get the content to display below it
    #content is-
    left:0
    top:150
    height:460
    width:850

    The footer would need to be
    #footer
    left:0
    top:610
    height:20
    width:850

    Almost every element you put into the content, can overflow. Unless you set the overflow property, it will break your content div. Keeping that in mind, every time you expand your content (add height), you'll need to reset the top position of your footer.

    IE:
    if you re-size content to equal 470, then you'll need to ad those 10 pixels worth to the 'top' value of your footer, top:620.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    easiest way is to get rid of absolute positioning. let the page automatically re-adjust to suit its content.

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    New Coder
    Join Date
    Dec 2006
    Posts
    41
    Thanks
    6
    Thanked 0 Times in 0 Posts
    changing the height for content div to "auto" and removing positioning did the trick....thank u guys


  •  

    Posting Permissions

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