I’m working on a new site. It is going to be like a portal with everything in it. news, articles, music, videos ..etc
I’m just trying to sort out the backbone of the site at the moment and I’m stuck with two things.
1) How to get the mini article footer to always appear underneath the photo in the Main Content block in the middle
2) Why isn’t the background color for my footer showing when I have it set it to grey.
I’d greatly appreciate any help with this.
For the footer, it is because it doesn’t have a declared height and all items within it are being floated. The best thing to do in this case is to add a clearing div after your floated items, and before the footer div gets closed.
You can pop this in there:
I’m not exactly sure what you’re asking in the first question.
That sorted out number 2.
Here is a screenshot of what I want to achieve for number 1:
It is hard to see, but at the moment I have a:
in there, but the problem is that also clears outside its current container. I only want it to clear within its container. How can I do this ?
hehe ok let’s try again.
OK Check the Site out now. See how the "mini article footer" is stuck to the right ! it should be like the image in my previous post.
By the way, by "mini article footer" I mean the Date and Read More.
I want that to always appear underneath everything and be like the image in my previous post.
Thanks Doc :D
OK I went and changed my code slightly, so that my problem can clearly be seen.
Check out the blue bar in the middle column of the layout. See how they show to the right of the photo. I want them Always showing underneath the photo.
How can I achieve this ?
Thank You. :(
1) Remove this:
Make sure the Doctype is the first thing that shows up.
2) You are missing your opening <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> (before <head>)
3 Add "clear:both;" to the articleFooter styling (this causes there to be a big gap in the first article which I cannot explain)
I managed to get the article footer to clear by changing this
It works in Firefox, IE7 and 8.
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".