Solved

breathing space around footer

Posted on 2013-06-26
13
261 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
  • 5
  • 3
  • 3
  • +1
13 Comments
 
LVL 52

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 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39279900
0
 
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

919 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now