12 replies [Last post]
chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

This if my first website using CSS and im pretty proud with how its turned out. I got a problem though. http://chadian22.no-ip.com . The container box (for blog posts) for is overlapped by the footer. I dont know what to do, if i set the box to height: 800px then it works untill the text gets longer than the 800px , if it is set to auto, then the text has to be long enough to clear the menu or else the menu and container box overlap. any suggestions?

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 30 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Simple Problem, I just dont know how to fix it

Well, you have gone and done what most of us did on our first CSS site - you have used absolute positioning to put your nav where you wanted it. position:absolute takes an element "out of the flow" so that to other elements it acts like it doesn't occupy space. As a consequence it can't "push down" the content to make your footer go where it is supposed to.

You need to redo this with the navicontain as a float.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

Yah, ok, ive set my navicontain for my right navigation box, ive set it to float:right; and im still having the same problems. Any suggestions?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Simple Problem, I just dont know how to fix it

Hi chadian22,
In navcontainer you have set the position value to float, change it to relative.
Float is not a valid value of position.

Hope that helps

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

Hmmm,, I tried relative, and positioning it right, but it didnt really work. it pushes everything i want next to it, under it.

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

Any suggestions? ive tried putting in "clear" boxes it down, but it pushes down all stuff just like if i set it to relative. FLoat doesn't push the stuff down, it just floats when i use float:right; .... sooo ?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Simple Problem, I just dont know how to fix it

Hi chadian22,
I'm a bit lost :? can you explain the problem again.
I don't see any footer problems in IE6 or Firefox, so what browser is displaying it wrongly.
The only problem I see now is navigation being absolutely positioned over the header which can be fixed by changing the value for top.

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

Yah, well you see when the actual content or my "blog" is really short, the footer overlaps . Try one of my other sections like, articles where i havnt filled in any content. Thats where i'm having troubles with stuff.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Simple Problem, I just dont know how to fix it

Hi chadian22,
Now I see what you are talking about.
The problem is caused by the right column being absolutely positioned, so all other items such as the footer don't take it into consideration when they are getting positioned.
So you could try a couple of things such as float the column right or position it relatively.

Hope that helps

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

Ok. Now its relative. And its working except for the inhalt (invisible box around my blog text) is set a -560 or something, it leaves a gap . It might look perfect for mozilla but not for ie, or vise versa. Its like each browser measures from the top differently... and in ie, my menu highlights dont work for the titles in the menu. Like bl0g and stuff , in ie they're really screwy looking and are mostly not shown/ partially

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 11 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Simple Problem, I just dont know how to fix it

Hi chadian22,
Looks like we are going full circle Smile
Have you thought about floating the columns?

If you position the columns absolutely the footer has no idea they are there, and if you position them relatively the columns don't like to sit next to each other without a large negative margin.
So floating with a clearing element before the footer may be the next alternative.

Hope that helps

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

wow, right when i thought i was on to something, and it was going to get easier, CSS slaps me in the face. I like PHP!!!! the results arn't so random!

chadian22
Offline
Regular
Edmonton, Alberta, Canada
Last seen: 16 years 38 weeks ago
Edmonton, Alberta, Canada
Joined: 2004-03-17
Posts: 27
Points: 0

Simple Problem, I just dont know how to fix it

.clear {
float:right;
width: 1px;
height: 650px;

}

I used that , and i put it next to my text in "inhalt" and it worked in mozilla but not ie. its just a clear box that pushes the text down. I dont want to rewrite all my code =( .