Solved

breathing space around footer

Posted on 2013-06-26
13
254 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 42

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
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 42

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 42

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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

758 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

17 Experts available now in Live!

Get 1:1 Help Now