Div Not Positioning Right

Clear his cache because the sticky footer is in place for that :).

He will need equal columns (you can fake equal apparences) via the ways here
http://pmob.co.uk/pob/equal-columns.htm

He’s never been to the site before and he said on the page for Online Tests page the footer is not sitting at the bottom of the browser its right after the sidebar, this is in IE7 I believe he is talking about.

Heres the page he said theres a bunch of white space after the footer that doesnt reach the bottom of browser…

http://scholarscanada.com/wordpress/education/?page_id=12

Thanks for the help hopefully we can solve it, its frustrating me… Then just got figure out this equal column thing lol

Didn’t work in Firefox either on his comp.

div#sidebar{height:auto;}
#container_top{border-top:101px solid transparent;}
#bottomline{margin:0 auto;height:101px;display:block;}
#content{display:block;}
html,body{height:100%;}
#wrapperbg{min-height:100%;margin-top:-101px;}
* html #wrapperbg{height:100%;overflow:visible;}
#bottomline{margin-top:0;}
div#contentInside{float:left;}
body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

You have white space beecause you didn’t use my code correctly :). That wsa my fault. I told you differnet things to do.

Remove all the code in your st ylsheet I gave you. Now just copy and paste the above in

Ok I went back to where I began with this and just pasted your code above into it and still got the same thing, still doesnt seem to be working and I need the footer height to be 159px, so thats the only thing I changed from 101 to 159. Any ideas why this isnt working still? If I send you the stylesheet you think you can see where I’m going wrong and send it back to me with an explanation on what you did, so I can understand it and use it in future projects?

Thanks,

Mike

I just went to your style sheet :). I can access it lol.

You may have made the footer 159px but you didn’t change the border-top nor the negative top margin there :). Thus it won’t work

#wrapperbg{min-height:100%;margin-top:-101px;}
#container_top{border-top:101px solid transparent;}

Change them respectively :slight_smile:

Just changed those from -101 and 101 to -159 and 159 and uploaded it but didn’t seem to do anything. Theres got to be something else I’m missing here lol

Hi, you seem to be missing some closing tags :slight_smile:

</div>
</div>[B]
</div>
</div>[/B]

		<div id="bottomline" class="clearfix">
<div id="bottom-text" class="left">
        <p>Your future begins today! Employment Solutions offers a multitude of adult training programs. We offer Academic Assessments, Upgrading,<br/>GED Preparation, Tutoring for ILC, Job Search Training, Introduction to Computers, Customer Service Programs and much more!</p>
        </div>
        <div id="bottom-logo" class="left"><a href="http://scholarscanada.com/ses"><img src="http://www.scholarscanada.com/wordpress/education/wp-content/themes/brainbox/education/ses-logo.png" /></a>
        </div>

</body>

Add in 2 closing tags (Add the bold)

Also, remove the min-height:101% on the html element

Then, if the screen is big enough teh sticky footer will work (even on my 20 inch the sidebar has a lot of content in it so I had to remove the sidebar but by doing so it showed me that the sticky footer is indeed working :))

hmmm it still doesnt work on Firefox or IE after doing that lol can’t believe this lol

Add one more </div> there :). Sorry.

Thanks it seemed to have worked but now the outerglow/shadow doesnt appear next to the footer but does everywhere else, any idea why? Also if I put on my -20px margin-top back on the bottomline so then there isnt space between the blue border lines on the homepage and the footer will this mess things up?

I changed the margin-top to -20px; but now the blue border goes overtop of the footer, is it possible to make it go behind the footer so I don’t see it, I changed it back to 0 to now. Also still trying to figure out why the gradient/shadow is not showing up behind the footer.

Thanks

Hey Ryan sorry to keep bothering you any idea how I can fix the above tow issues I’m trying to solve?

Thanks,

Mike

Hi, it doesn’t appear next to the footer because the image isn’t tiling down the footer. It was tiling down #wrapperbg and the #bottomline is not in it anymore.

You would have to next a div inside of #bottomline.

Place the image that was on #wrapperbg also on #bottomline, and inside the nested div you just made, place the image that was previously on #bottomline :slight_smile:

And the margin-top isn’t working for #bottomline since I gave you margin-top:0; and my code came after yours in the CSS.

Thanks I believe I’m getting there just got to figure out how to center the footer image or would it be best just to make a png of it and make it 1050px wide?

Hi, giving “margin:0 auto;” to center “gradient” makes everything perfect on my end :).

Perfect now when I set the margin-top to -20px the border lines go on top of the footer graphics, is there an easy fix for this…

http://scholarscanada.com/wordpress/education/?page_id=3

Same as on the inside pages, examples Carrers where the sidebar goes over the footer

Also, the bars/borders on the homepage don’t go right down in IE7 but do in Firefox and the text in the footer box in IE is all messed up and not lined up properly but is lined up nicely in Firefox and seems like on the PC in each browser it looks like everything is off by 1 px either one direction or the other, any idea what is causing this, I’ve ran into this in other sites as well.

Thanks

Why do you need the negative 20px? It looks the same without it on the page you just linked to, and no overlap of the images occur…

Your footer image is a bit awkard because of the curve lines. It would be hard to get each matching up with the footer. The effort needed to get them lining up would not be worth it unless your client specifically wants it :slight_smile:

Aka you would have to manually set the height of the left/middle blocks (since the borders are on them) to the exact pixel height.

The left one can be 333px and the middle can be 348px

If you rework the image to have no white space at the very top of the image (before the top blue border on the wavy strip) then we could get that working as well :).

It’s just a lot of effort right now to get everything pixel perfect.

As for the footer text, you are basically hoping everything to line up

The blue box around the <p> should be it’s own image, set on the <p>. So slice that up.