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
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.
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 
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.
<!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.
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.
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.