Jump to content
DarkxPunk

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

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

Share this post


Link to post
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

Edited by DarkxPunk

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...