Div Not Positioning Right

Hi guys,

Why is my sidebar showing up below the main content it’s not too wide so I can’t seem to figure out why it’s not showing up at the top rather than the bottom.

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

Also is there an easy way to make a sticky footer, what do I need to change in my code to make the footer always stick at the bottom. And then how can I have the background-color of my sideber go from the top right down to the bottom as well, I just have it set to 90px for testing purposes now.

Thanks! :slight_smile:

Mike

still having troubles with this, thought it may have been a missed close div but dont think thats it either, its boggled my mind.

Hi Mike,
When a float sits beside a static block it always need to come first in the html source if you want them both on the same vertical plane. Just move it up above the #contentInside in the html or float them both.

[B]<div id="mainArea">[/B]
                
[B]<div id="sidebar" class="right">[/B]
<p>This is testing the sidebar</p>
</div>

[B]<div id="contentInside">[/B]

Hi, the float needs to come first in the HTML :). You floated the sidebar but not the main content column. Putting a border around “div#contentInside” shows that it indeed IS too wide (though because it isn’t floated)

Float it :slight_smile:

div#contentInside{float:left;}

Also you might wanna remove the negative top margin on the #bottomline

#bottomline{margin-top:0;}

To get the sticky footer working you would have to place the footer (#bottomline) outside of #wrapperbg so they are adjacent, then give this

html,body{height:100&#37;;}
#wrapperbg{min-height:100%;margin-top:-159px;padding-top:159px;}
* html #wrapperbg{height:100%;overflow:visible;}

You will then need a fix for IE8/Opera (there is a better fix here but I’m too lazy to find it)

<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->

Then this in the CSS :slight_smile:

body:before {/* thanks to Maleika (Kohoutec)*/
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

Ok, hmm not sure I fully understand that, but really need to do this.

Could you please if you got time, show how much style sheet should look like and html should look like. If you don’t have time thats ok, I’ll try to get this to work.

Thanks,

Mike

For the sticky footer you can use the following code. The important points are “bottom:0” and “position:fixed” in the CSS for the footer. Make sure to take into account that part of your content will be covered by the footer and arrange padding or margins accordingly.

body {
margin:0;
padding:0;
}

#footer {
width:100%; 
height:100px; 
background-color:#0033FF; 
color:#FFFFFF; 
bottom:0; 
position:fixed;
}
<body>
<div id="header">header</div>
<div id="content">random content</div>
<div id="footer">footer content</div>
</body>

Thanks huit, getting closer to what I need, but now it is covering up the content, can I have it right at the bottom of the actually content so it does not ocver up any content?

Thanks,

Mike

Hi Mike,

What huit described is called a “fixed footer” and is a bit different from, and a bit more delicate than, a “sticky footer”.

Which one do you want?

A fixed footer remains on-screen ALL the time. It also has a disadvantage: if the users’ viewport or browser isn’t wide enough, while the rest of the site gets a nice scrollbar to view the content to the right, the scrollbar will not affect the footer. Anything inside a fixed footer who is wider than a user’s viewport will be unavailable. If there’s not much in the footer that might be ok.

This is what they look like. (dummy page)
Make your browser less wide than 800px. Is that going to be a problem on your site?

A sticky footer CAN be offscreen. Sticky footers stay at the bottom of the viewport when the content is too short to push the footer down by itself. Pretty much exist to prevent web site underwear from showing : )
When content is longer than screen/viewport height, the footer is pushed down like regular footers are. The have no scrolling issues like fixed footers, but they do need some sort of fixed height (you can have a bit of leeway but they can’t be too dynamic).

Which do you want? Ryan gave you one way to do sticky footers… I tend to do then another way, but 6 of one, half-dozen of the other…

Both kinds of footers normally use padding on the bottom of whatever container holds the main page content to prevent the footers from covering content. So, as far as I’m concerned, if you’re happy with huit’s code then adding padding to your content’s container (in huit’s example it would be Content, in Ryan’s (sticky footer) example it would be some child of #wrapperbg, not #wrapperbg itself!) to fix the content-covering problem.

Personally I like sticky footers over fixed because of the scrolling problem mentioned above. However fixed footers have the advantage (if you needed it) of coming pretty much anywhere in source order you need.

Hmm, I guess there is a difference in semantics here. Sticky footer = Fixed footer to me ^^;; Sorry! makes a mental note of it

mbond5, if you still want to use the fixed footer you’d need to add padding or margin to the bottom of you content equal to the height of the footer. Guess that would have been good to add in the example too.

Stomme poes, does your method of sticky footers work well without needing hacks? I noticed that Ryan’s code needs hacks for IE8/Opera, but maybe you can’t get around it for this.

You know, I’ve never been able to get sticky footers to work, but I do agree that they are very appealing. I did try it way back when I first learned HTML/CSS, but I’d always get caught in a logic loop, and then I’d wish HTML worked like that by default. Hahaha. Now I’m going to see if I can figure it out without looking at Ryan’s code. :slight_smile:

Good luck mbond5!

I noticed that Ryan’s code needs hacks for IE8/Opera, but maybe you can’t get around it for this.

No, Not as far as I know… those are to get around browser rendering bugs… I believe Opera’s had to do with either zooming or when the user resized the window. It was cool to know, and then later I was like, whatever, any Opera user who see the footer looking weird after playing with the edges of their browser is probably going to try a refresh anyway. Maybe I’m just a lazy developer. Ryan likes things to be all perfect and stuff… takes after Paul O’B.

I forget what IE8’s problem was, and I ignore it too… though I prolly wouldn’t if I actually spent time with that browser, lawlz.

My sticky footer code I think is based on some older version of Paul’s. Instead of pulling the main box up I just leave it and pull the footer up over the bottom instead. It might be less code, not sure. If it is less code, then that must be why I use it cause I’m lazy.

I believe Ryan understands what I’m looking for but I’m just having trouble executing it and understanding how to rearrange my html and css

Both IE8 and Opear have the same problem. IT’s a redraw bug. If you take the bottom of the window (not maximized, and without my fixes) and move it vertically with a sticky footer, it will not move the sticky footer with it. ONly a horizontal move of the page, or a refresh will fix it.

And yes I try to be like Paul O’B :). My goal is to be like him one day.

Basiccally just go into your stylesheet and add this in


html,body{height:100%;}
#wrapperbg{min-height:100%;margin-top:-159px;padding-top:159px;}
* 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*/
}

Then in your HTML place this (the code inside <style> can be moved to an exteranl stylesheet)

<!--[if (lte IE 6)|(gte IE 8)]>
<style type="text/css">
#outer {height:100%;display:table;}
</style>
<![endif]-->

Then I will work on the HTML with you. But do that :). It won’t work as of yet but once you do that I’ll instruct you on the HTML changes.

I believe Opera’s had to do with either zooming or when the user resized the window.

I forget what IE8’s problem was, and I ignore it too…

Both IE8 and Opera are min-height:100% bugs and they are triggered by dragging the bottom of the browser window straight down, not by dragging the corner down. A complete explanation of the problem and the workarounds can be found in this article. :slight_smile:

Sticky Footers - A Sticky Subject!

Instead of pulling the main box up I just leave it and pull the footer up over the bottom instead.

That is the method I typically use since it keeps from having to put a top buffer border on the header. But you must place a bottom padding on an inner content div when you pull the footer up.

Basic Sticky Footer #1

The new fix for IE8 rather than using display:table is very simple and it just requires setting height:1%; on the #wrapper:after block. That forces IE8 to look back to the #wrapper and confirm the min-height:100%;

Min-height is not a defined height so it is not actually making the :after block 1% high. It is just telling IE8 to look to the parent and confirm the height. At least that is how I understood it. :wink:

/*=== Float Containment and Bug Fixes (Do Not Alter These!) ===*/

[B]body:before[/B] {[COLOR=Blue]/*Opera min-height 100% Fix (Maleika)*/[/COLOR]
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/*eliminate need for inner non clearing element (Erik.J)*/
}
[B]#wrapper:after, [/B] [COLOR=Blue]/* #wrapper:after for IE8 min-height:100% Fix*/[/COLOR]
#content:after { /* #content:after for Float Containment*/
    clear:both;
    content:"";
    display:block;
    [COLOR=Blue]height:1%;/*fix IE8 min-height:100% bug (Erik.J)*/[/COLOR]
    font-size:0;
}

Min-height is not a defined height so it is not actually making the :after block 1% high.

Yeah I learned that when trying to have min-max-width floats back when some browsers did not like that… it’s not the same as a width, so it makes sense that min-height is not the same as height.

I’m still lazy enough to assume users who see a page get weird when they play with the edges are going to either
a. beat the monitor a few times

b. beat the keyboard a few times

c. throw the mouse across the room

or

d. refresh

Those are all fine with me. : )

Besides, I demand better from Opera. IE, I’d expect to puke over weirdness. Opera knows better.

Off Topic:

Don’t forget taht Option B may have the adverse side effect of Option D :wink:

Opera and Trident seem to have many simliarities in common, but I’m surprised IE8 has regressed with this though :frowning:

Yes I do too, and I am a little PO’d with Opera 10 right now. :tdown:

I am putting “page redraw scripts” in some of my demos now to fix their new AP Bug.
It is the only thing I know to do right now to hold them together. :rolleyes:

Hello Ryan,

Ok I pasted that code you provided into my stylesheet as well as the stuff for the html, hope I did it correctly…

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

If not just let me know and if so, lets move onto the next step my friend.

Thanks for showing me how to do this by the way, I appreciate it a ton.

Hi, also make these changes (sorry)

div#sidebar{height:auto;}
#wrapperbg{margin-top:-101px;padding-top:0;}
#container_top{border-top:101px solid transparent;}
#bottomline{margin:0 auto;height:101px;display:block;}
#content{display:block;}

Sorry about that lol

I gave display:block; on #bottomline and Content because the clearfix was making them display:inline-block (I’m guessing you still have that line for IE5 mac in there)

You can either remove that IE5 backslash hack or you can give it display:block; ther

Also in <div id=“content”> in the HTML give that class=“clearfix” :slight_smile:

Now, in the HTML the bottomline div needs to be the last element in the HTML before <body>

</div><!-- end container_top -->
		<div id="bottomline" class="clearfix">
        [B]<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>[/B]
[COLOR="Red"]</body>[/COLOR]

:slight_smile:

Thanks Ryan, I can’t tell since I am working on a small screen laptop but can you check to see if I did it properly and if it works in IE as well, I’m only on a Mac right now wont get a chance to check IE till tonight.

Now the only other question I have is the sidebar how can I make it go all the way down to the footer even if there isnt content to go all the way down, such as on the Testimonials page of that site.

Thanks, hopefully were getting to the solution :slight_smile:

Hmmm it didn’t work, my friend just checked it on his large monitor and said it still looks same as did before no difference