Footer for my website's alignment is out please help

Hello Gurus, I need major help please I have made changes to my website Shawco , and the footer seems to be off as indicated in the Image.
Please can you look at the source code and instruct me how to fix this as its a real concern for me.
ProblemFooter
Jason LaskeyICT Systems and Network EngineerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
To #footer {} add
margin-left:10px;

Your problem is the footer is inside the inner block which has padding
0
Joshua GrantomSenior Systems AdministratorCommented:
under the style.csss

you need to change the margin to what is bold

#footer .foot_inner {
width: 918px;
padding: 15px 20px;
background-image: url('../images/footer.gif');
background-repeat: repeat-x;
background-color: #548DD4;
border: 1px solid #5484BF;
margin: 0 auto 0 -10px;
color: #FFF;
}
0
Julian HansenCommented:
I wouldn't change the margin - that is trying to paint over the problem

Here is what I would do

1.  Remove the float left on footer and parents up the chain - not sure why you have those.
2. Remove the width: 918px on your footer-inner - if you have removed the float left on the footer you should have a contained footer but the sections inside are wrapping - this is because they have fixed widths and margins
3. for the divs aboutweb, research, sharingweb, adrs remove the margin: 20px and then either give them each a new but same class and give that class a width of 25% or just make the width for each of those blocks 25%.

If you need to pad them then add the style
box-sizing: border-box;

And add padding - that won't effect the 25% width.

That should get you going in the right direction

So
#footer {
  /* remove float: left; */
  width: 100%;
}
#footer .foot_inner {
  /* remove width: 918px */
  background-color: #548dd4;
  background-image: url("../images/footer.gif");
  background-repeat: repeat-x;
  border: 1px solid #5484bf;
  color: #fff;
  margin: 0 auto;
  padding: 15px 20px;
}
#footer .aboutweb {
  float: left;
  /* remove margin-right: 20px; */
  width: 25%; /* change from 220px; */
}
#footer .research {
  float: left;
  /* remove margin-right: 20px; */
  width: 25%; /* change from 220px; */
}
#footer .sharingexp {
  float: left;
  width: 25%; /* change from 220px; */
}
#footer .adrs {
  width: 25%; /* change from 200px; */
}

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Ray PaseurCommented:
This is always easier to get right if you have valid markup.  Some suggestions here:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.shawco.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
0
Jason LaskeyICT Systems and Network EngineerAuthor Commented:
Thanks Mates , however I am still not coming right here is the code please be kind and help a brother.
<div id="footer">
<span style="font-family: tahoma, arial, helvetica, sans-serif; font-size: small;">
    	<div class="foot_inner">
        	<div class="aboutweb">
            	<h6>SHAWCO</h6>
                <ul>
                	<li><a href="{path=''}">Home</a></li>
                    <li><a href="{path='about-us'}">About Us</a></li>
                    <li><a href="{path='contact-us'}">Contact Us</a></li>
                </ul>
            </div>
            <div class="research">
            	<h6>Sectors</h6>
                <ul>
                	<li><a href="{path='education'}">Education</a></li>
                    <li><a href="{path='health'}">Health</a></li>
                </ul>
            </div>
            <div class="sharingexp">
            	<h6>SHAWCO Enterprise</h6>
                <ul>
                	<li><a href="{path='enterprise-development/projects/shawco-accommodation'}">SHAWCO Accommodation</a></li>
                    <li><a href="{path='enterprise-development/projects/rags-to-riches'}">Rags to Riches</a></li>
                    <li><a href="{path='enterprise-development/projects/shawco-transport'}">SHAWCO Transport</a></li>
                </ul>
            </div>
            <div class="adrs">
            	<a href="{path=''}" class="footlogo"><img src="{site_url}images/logo_small.jpg" alt="" /></a>
                <p>
                	<br /><br /><br/>SHAWCO<br />
                	Braemar Cottage<br />
					Faculty of Health Sciences<br />
					University of Cape Town
                </p>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
        <div class="copy_inner">
        	<p><a style="color:#FFFFFF;" href="{path='terms-and-conditions'}">Terms and Conditions</a> | All contents copyright &copy; SHAWCO</p>
            <a href="#" class="top">Top</a>
        </div>
    </div>

Open in new window

0
Joshua GrantomSenior Systems AdministratorCommented:
your editing the wrong file.

you need to edit the style.css or custom.css under the css folder.
0
GaryCommented:
style.css line 1291

#footer {
    float: left;
    width: 100%;
   margin-left:-10px
}
0
Julian HansenCommented:
@Gary, is adding a negative margin as suggested not just patching bad styling.

@Jason - did you try the suggestion in my post?
0
GaryCommented:
The better solution would be to take the whole footer block of code and move it outside the inner class div - no css changes needed at all (but there maybe a reason for the layout...?)

<div class="inner">
...
</div>
<div id="footer">
...
</div>
0
Joshua GrantomSenior Systems AdministratorCommented:
Julian,

Based on previous posts, I believe Jason is very new to web development and may not be able to comprehend all of the changes you are suggesting.

We all start somewhere.
0
Julian HansenCommented:
@Joshua,

He's a UCT boy on SHAWCO - so assuming he is bright and eager - code was provided with comments - shouldn't be too hard to follow.

Basically he has some unnecessary floats - a fixed width footer-inner and some margin's and fixed widths in the footer sections to make minor modifications to - for which the CSS was provided.

The question is - at EE do we recommend quick and dirty fixes or do we try to assist in implementing good coding practices. A quick negative margin fix might work now but down the line when other changes are made to the markup it could have side effects.

Better to get it right from the get go, no?
0
COBOLdinosaurCommented:
So several hours screwing around with crap code that (as Ray already pointed out has errors; including structural errors.  Garbage in; garbage out!

Anything that actually works is just another hack to a page that is already structurally unstable.  Painting a fence made of rotting wood will not keep if from falling down.

Cd&
0
Joshua GrantomSenior Systems AdministratorCommented:
Hopefully he will use Rays link as a guide to fix his HTML and learn in the process.
0
Jason LaskeyICT Systems and Network EngineerAuthor Commented:
Hey Josh thanks BTW your solution worked. As for Julian`s input he is right I prefer to do things right from the beginning too, to prevent future mishaps. However I am only helping someone out with this and I am not a dedicated Web Developer, So just wanted to point this out.

Thanks Again Guys for all of your comments and help! ;)
0
GaryCommented:
The accepted solution only moves part of the footer back, the text at the bottom is still out of alignment (though I suppose it doesn't look terrible)
And since my answer is first and does it correctly on the whole footer I have to object to the accepted answer.
0
Jason LaskeyICT Systems and Network EngineerAuthor Commented:
I never used Gary's method so I cant say its incorrect, I used Josh method and this worked for me, maybe Garry`s is better who am I to argue as I never used it
0
Jason LaskeyICT Systems and Network EngineerAuthor Commented:
This problem was not resolved sorry guys only found out today as when using Gary`s method as Julian mentioned it fixes the one pages alignment,b but now the reset of the pages alignment is out.Please Guys I really do need some serious assistance fixing this.

Thanks for all your time and work
0
GaryCommented:
Before your footer block add a closing div as bolded.

<div class="givengain-widget" data-type="cause" data-id="4574" data-width="200" data-detail="donate|fundraise"></div><script type="text/javascript" src="https://widget.givengain.com/gg_widget.js"></script>        
</div>
</div>
    <div class="clear"></div>
    <!-- Footer -->
    <div id="footer">
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
@Jason - there are fairly detailed instructions in my previous post that should help to resolve this.

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_28530026.html#a40357382

The code snippet has comments about what to add remove. Try that and if still stuck post back and we can take it from there.
0
GaryCommented:
There are no CSS changes needed - the HTML needs to fixed as I indicate above with simply adding a closing div. but it actually needs two closing divs, not just one.
And it also needs one before the closing body tag as well.
0
Jason LaskeyICT Systems and Network EngineerAuthor Commented:
Hi Gary your solution is correct, this question was posted as my Fiance needed advice on this but I think she used your method to come right so thanks again!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.