Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 274
  • Last Modified:

breathing space around footer

Ok.  How do I create breathing space around my footer?  I have tried padding and margins but nothing works.  Pretty soon I will need some foot spray for the tight quarters - ha ha ha

http://nsitedesigns.com/nsitedesigns/healthy/healthy.css
http://nsitedesigns.com/nsitedesigns/healthy/contact.html

p.s.  In dreamweaver it shows up just dandy.  When I upload it, the margin doesn't display.


/* ______________ FOOTER ________________*/

.footer {
	padding: 8px 0;
	position: relative;
	clear: both; 
	border-top:10px solid #5788a1;
	margin-top:100px;
}

.footer p {
	color:#b79841;
	text-align:center;}

Open in new window

0
nsitedesigns
Asked:
nsitedesigns
  • 5
  • 3
  • 3
  • +1
3 Solutions
 
Scott Fell, EE MVEDeveloperCommented:
Try

.footer p{
    padding-top: 15px;
    padding-bottom: 15px;
}
0
 
nsitedesignsAuthor Commented:
I am looking for the space to be ABOVE the solid blue line to separate body copy from footer.  Your solution puts more space above and below address.
0
 
Scott Fell, EE MVEDeveloperCommented:
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
lightspeedvtCommented:
"margin-top" at footer won't work with your situation. So, use these styles:
.footer {
    clear: both;
    padding-top: 28px;
    position: relative;
}

.footer p {
    border-top: 10px solid #5788A1;
    color: #B79841;
    padding: 8px 0;
    text-align: center;
}

Open in new window

0
 
lightspeedvtCommented:
Forgot to add why it won't work - because of "clear:both". And as you need to keep "clear:both" you just need to add padding to footer and top border to <p> inside footer.
0
 
Chris StanyonCommented:
Just add overflow:hidden to your .content_wide rule and it'll work just fine (line 151 of healthy.css)

.content_wide {
    margin: 30px 0 60px 255px;
    padding: 0;
    width: 660px;
    overflow: hidden; // add this in
}

Open in new window

0
 
lightspeedvtCommented:
Good point from ChrisStanyon, but in this case 'overflow:hidden' should be added to all other layers, as if content smaller other layers will be close to footer. I am talking about layers like sidebars (at current moment you have bottom padding for them, but if you will have some more layers - keep my notice in mind).
0
 
Chris StanyonCommented:
@lightspeedvt - You don't need it on the sidebar because the content isn't floated and so the div doesn't collapse.
0
 
lightspeedvtCommented:
@ChrisStanyon - ".content_wide" is not floated, but it stays with rest floated elements. So, decrease the content_wide content and eliminate 'margin-bottom' at 'sibebar1' - you will get the situation that I was describing.
0
 
lightspeedvtCommented:
@ChrisStanyon - never mind, I've misunderstood your tip.

@nsitedesigns - ChrisStanyon provided most best solution for your situation.
0
 
nsitedesignsAuthor Commented:
Padas,  The errors that you see are from the google maps.  Not sure how to fix that. Although, I am surprised that google hasn't fixed them.

ChrisStanyon, Your solution worked on the Contact page which has the content-wide div.  It doesn't work on the content div (not the wide one).  However, since there is some floating going on, maybe I need to modify the content div differently?  The content div is used on all pages that have 3 columns.  (The wide is used on 2 column pages)

.content {
margin:0 35px 30px 35px; /*gutters*/
	padding: 0;
	width: 350px;
	float: left;	
	
}


.content_wide {
margin: 30px 0px 60px 255px;
	padding: 0;
	width: 660px;
		overflow: hidden;
}

.content_services {
margin: 0px;
	padding: 0;
	width: 660px;
	float:left;
		
}

Open in new window


Do I need to implement multiple solutions?
0
 
Chris StanyonCommented:
Yeah, it's because of your floats again.

Couple of different approaches to get things behaving properly.

Option 1:
Add a bottom margin of 100px to all of your column divs (sidebar1, sidebar2, content-wide and content) and remove the top margin from the footer. This will then push the footer away from any of your [longest] column by 100px;

Option 2:
Wrap your columns (2 or 3) inside another DIV and add overflow:hidden to it. That will contain your floats and top-margin on your footer will then push it down. Something like this pseudo code:

<container>
     <header></header>
     <columns> << make sure you add overflow:hidden to this!!
          <sidebar1></sidebar1>
          <content></content>
          <sidebar2></sidebar2>
     </columns>
     <footer></footer>
</container>

Open in new window

or

<container>
     <header></header>
     <columns> << make sure you add overflow:hidden to this!!
          <sidebar1></sidebar1>
          <content-wide></content-wide>
     </columns>
     <footer></footer>
</container>

Open in new window

0
 
nsitedesignsAuthor Commented:
thanks everyone!
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now