| Home | Register | FAQ | Members List | Search | Today's Posts | Mark Forums Read |
04-12-2007, 10:34
|
#1 (permalink) |
|
www.vokab.co.uk
Join Date: Aug 2007
Posts: 23
|
CSS Help
hey all been having some trouble with CSS code.. basically here is my site broken-silence.co.uk/uni/home.htm as you can see the 2 side divs just keep on going past the footer. the site is designed so when there is more content in the middle section it will expand its hight to fit, pushing down the footer with it. i need the side divs to stop at the footer. hope that all makes sense.. |
|
|
|
|
04-12-2007, 10:48
|
#2 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
I don't see your side divs going past the footer, instead I see your repeating background image continuing below the footer. If I'm not seeing things correctly and you really need the side divs to also push the footer downwards based on their height, just add clear:both; to the CSS selector your footer div is using. |
|
|
|
04-12-2007, 11:08
|
#4 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
Right, because the advice I gave was assuming I saw it wrong - I was trying to fix the problem you described and not the problem I saw. Give me a few and I'll take another stab at it... |
|
|
|
04-12-2007, 11:30
|
#6 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
Humor me for a moment and change the doctype to something more appropriate: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Then, add this to your markup, anywhere in the <head> element: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Then it'll be a bit easier to diagnose. |
|
|
|
04-12-2007, 11:46
|
#8 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
It got borked up a bit more than before now. Change the first four lines of your document to this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
|
|
|
04-12-2007, 12:02
|
#10 (permalink) |
|
goober :-)
Join Date: Dec 2006
Location: Birmingham, UK
Posts: 533
 |
You've got a few faux-pa's in your code there, mate... You're positioning elements left and right with position: absolute, which generally I prefer to avoid, unless its absolutely necessary. Also, I have a hunch that your problems might be being made worse by the height: 100%s you have spattered throughout your css... Browsers have a habit of rendering that a bit funny... If you're using position absolute for your left and right side bits (and you could just set the width here, and not need to include the image... just set a background), you could use the following: position: absolute; left: 0; top: 0; bottom: 0; If you set opposite properties with position: absolute, the browser will stretch the element to meet both requirements (hence negating the need to even set a height at all) I would suggest for what you are doing that position absolute is probably an easier option than using floats, so just leave the content column as a position relative div with appropriate margins on it to position it away from the sides. Oh, and for reference, the sides should be done with spans, with css forcing them to be display: block. Spans are semantically neutral... Thus better to use for purely presentational stuff. Hope some of that helps David My signature sucks.
|
|
|
|
04-12-2007, 12:06
|
#12 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
Now we're getting there... the issue certainly has something to do with all of the times you define a height. Whether it's the 35em on #centerSection, or the many 100% you've got elsewhere... I'd literally comment those lines of CSS out, if only temporarily, and see what the results are. Typically, heights NEVER have to be defined. You will, however, want to keep the height values in place for things like the header and footer sections... |
|
|
|
04-12-2007, 12:19
|
#16 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
Not true my good man. Visually, it changed nothing, but your code it much more appropriate now. From here, it appears that you should have the left and right 'edge' images become a repeating background that will always go the length of the #content div. Currently, they're fixed-height images that simply won't stretch, height-wise. You've made great progress really, the code was a bit... nasty, until now. |
|
|
|
04-12-2007, 12:27
|
#18 (permalink) |
|
Semantics, yay.
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,128
|
Well, you see, the left and right columns aren't influenced to grow downward (to follow the height of the main content) because they aren't the elements that contain the expanding content. They're happy to be as high as the image inside them, and that's it. This is why you have to make the background image appear NOT in the right and left divs, but in the background of the content div... because it is that div that grows up and down with the content. |
|
|
|
04-12-2007, 12:37
|
#19 (permalink) |
|
goober :-)
Join Date: Dec 2006
Location: Birmingham, UK
Posts: 533
|
Not entirely true, heraklees... The reason I added the top: 0; bottom: 0; to the side elements was because the content div should expand the container downwards as it grows. Sticking the sides to the container, then, should be ok, as long as both top and bottom values are set for the side areas. To revise my previous comments, the right hand side column should definately be a div... you are going to have content in there (at the moment its just an image, but I assume it will be proper content later). I can see why you have the images in the side areas now... they overlay the repeating background. Just add "bottom: 0;" to the css for both the left and right elements, and that should sort your problem. I would still make the left hand side a span, force it to display: block; to keep it semantically neutral. Once you've done that, you should be good to go. My signature sucks.
|
|
|
 |
