SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: footer issue

  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    footer issue

    Hey everyone,
    i got a footer which should stick to the right column, it works fine in all browser i've checked (chrome, IE9, IE8..) but in IE7 not
    here is an example of the problem: http://sospets.brinkster.net/htmlpage.htm
    thanks for the help

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I'm not seeing anything there that would make it 'stick' to your right column... In fact I can't even figure out what you are trying to do.. If it's supposed to be in/on the right column it should be... in the right column in the markup.

    In general, I think whatever it is you are trying to do, you're over-thinking it; but it's hard to tell since you have no actual content in the page -- which IMHO is one of the biggest mistakes you can make in trying to code a layout. Code the ENTIRE markup and content (or a reasonable facsimile) BEFORE even thinking layout and then bend that markup to your will with CSS... that way you don't get your heart set on layout concepts that aren't viable for your content. (see "kick the PSD jockey in the nerts")

    If anything, it looks like your footer is rendering BEHIND the right column here, in every browser.

  3. #3
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Sorry if it wasn't clear, i acutally got a page on local with most of the site rdy until i jumped into this problem, i thought it would be easier for ppl here to read only the nesssasry part rather than all of it so i just gave this one
    If you'll look at the page i gave in chrome for example, u'll see that all the green part begins right after the right gray column ends, even if the left column still didnt finish, which is the right thing i want to achieve
    now if u'll look at it from IE7, u'll see that it ends when the left column's content ends, which is wrong
    thats what i want to fix, i want it to always stick to that right gray column
    I made the left column have more lines than the right one on purpose so u could see where the problem is

    if its still not clear then ill uplaod my current site when ill get back from uni and reply here

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It can't be done in IE7 unless you lose the dimensions from the parents which are applying haslayout to the element. A parent element with haslayout will auto enclose its child floats and so the white background on #container will always start below both floats.

    Your footer is actually starting under the right column in all browsers but as the footer has no background or content it doesn't show. The issue is not the footer but the white background on your container which is clearing both floats automatically.

    It could only be achieved by losing haslayout on the parents but the you lose your centred layout.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style>
    * {
    	margin:0;
    	padding:0
    }
    body {
    	background:#66CC66;
    	min-width:950px;
    }
    #container {
    	font:80% Arial, Verdana, Helvetica, sans-serif;
    	background:#FFF
    }
    #main { margin:auto; }
    #left, #right {
    	padding-top:2.5em;
    	direction:rtl
    }
    #left {
    	float:left;
    	width:66%;
    }
    #right {
    	background:gray;
    	border:1px solid #B3BBBF;
    	border-width:0 1px;
    	float:right;
    	width:25%;
    	padding:0 2%
    }
    #footer {
    	background:green;
    	clear:right
    }
    </style>
    </head>
    
    <body>
    <div id="container">
    		<div id="main">
    				<div id="left">
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    						<p>left</p>
    				</div>
    				<div id="right">
    						<p>right</p>
    						<p>right</p>
    						<p>right</p>
    						<p>right</p>
    						<p>right</p>
    				</div>
    				<div id="footer">Footer</div>
    		</div>
    </div>
    </body>
    </html>
    You'll need to abandon that approach if IE7 support is required. To be honest I can't see the logic in what you are doing anyway and why you would want the backgrounds to overlap like that.

  5. #5
    SitePoint Evangelist
    Join Date
    Jun 2010
    Location
    Israel
    Posts
    523
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You'll need to abandon that approach if IE7 support is required. To be honest I can't see the logic in what you are doing anyway and why you would want the backgrounds to overlap like that
    I don't want the backgrounds to overlap, but unfortunately the content on the left column sometimes bigger than the right one (like in the example) and it'll have to come like that.

    So is this problem only in IE7 ? if yes then ill just make a workaround for that.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Perhaps if you show a real example of what you want then we can offer more specific advice? I have never seen a need to do what you seem to be trying to do and I don't think you understand what is happening to produce the layout you see.

    If you just want equal column colours or something like that then there are better approaches.


Bookmarks

Posting Permissions

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