Solved

breathing space around footer

Posted on 2013-06-26
13
266 Views
Last Modified: 2013-06-27
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
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 3
  • +1
13 Comments
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39279821
Try

.footer p{
    padding-top: 15px;
    padding-bottom: 15px;
}
0
 

Author Comment

by:nsitedesigns
ID: 39279832
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
 
LVL 53

Expert Comment

by:Scott Fell, EE MVE
ID: 39279900
0
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39280012
"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
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39280013
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 333 total points
ID: 39280765
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
 
LVL 6

Assisted Solution

by:lightspeedvt
lightspeedvt earned 167 total points
ID: 39280955
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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39280972
@lightspeedvt - You don't need it on the sidebar because the content isn't floated and so the div doesn't collapse.
0
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39281000
@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
 
LVL 6

Expert Comment

by:lightspeedvt
ID: 39281017
@ChrisStanyon - never mind, I've misunderstood your tip.

@nsitedesigns - ChrisStanyon provided most best solution for your situation.
0
 

Author Comment

by:nsitedesigns
ID: 39281277
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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 333 total points
ID: 39281361
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
 

Author Closing Comment

by:nsitedesigns
ID: 39281484
thanks everyone!
0

Featured Post

Do you have a plan for Continuity?

It's inevitable. People leave organizations creating a gap in your service. That's where Percona comes in.

See how Pepper.com relies on Percona to:
-Manage their database
-Guarantee data safety and protection
-Provide database expertise that is available for any situation

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…

632 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question