Jump to content

Creating A Spacer Between A 'contentwrapper' And A 'footer'


DarkxPunk

Recommended Posts

Hi everyone! This is my second post on this forum, and my first thread! I am a semi experienced coder in both (X)HTML, and CSS having done many web pages for simply learning purposes, and for my local Zeitgeist Chapter http://www.zeitgeist-toronto.com. In simple; I won't be needing so much in-depth explanation; simply code will do. So let me get started. :D If you visit http://www.beta.zeit...oronto.com/test (note this will be updated constantly, and possibly with the solution. feel free to take my code and use it for yourself :D) you will notice that there is no real space between my 'contentWrapper' and the 'footer'. Now logically I would figure I need to add a 'margin' to create the space. Well that would work if I did not have two columns in the 'contentWrapper', and needed to use 'clear: left;' which negates my 'margin'. Now I already know the normal solution is to add a 'div' between the 'contentWrapper' and the 'footer' right? Well I don't want to do that. Maybe I have to, but I am challenging the community to find a way to do it without that additional 'div' and to possibly explain why 'margins' can't work when I use 'clear: left;'. My opinion, you mite as well prevent 'padding' and 'boarders' working then if you stop 'margins'. Anyway hope to hear some ideas. PeaceMichael Snape (zip of all the necessary files; no images)

betazeittortest.zip

Link to comment
Share on other sites

SOLUTION: add 'overflow: hidden;' to the 'contentWrapper' Now okay thats one hurdle, but now the question is why!? What does 'overflow: hidden' do to the 'contentWrapper' to make it almost...solid? I personally would love to know and maybe someone else would too! PeaceMichael Snape

Link to comment
Share on other sites

When you use float for the child elements, the parent element in this case 'contentWrapper' is not able to surround them as it normally would. To fix this, you use would overflow: hidden OR place a div with clear:both; with 0 or 1px height under the last child element within parent. This is visible to 'contentWrapper' so it wraps round this and also then the other child elements, this also prevents the float seeping down to the footer element causing problems like ignoring the margins you have set.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...