/    Sign up×
Community /Pin to ProfileBookmark

Help With CSS Code – Footer Padding Not Working!

Hi everyone,

I am new to this site and new to web dev. I am currently enrolled in a 1 year program and I’ve run into some problems with my assignment.

I cannot get the footer padding working correctly. My code is a mix of my own knowledge mixed with YouTube tutorials.

html {

height: 100%;
margin: auto;
background-color: whitesmoke;

}

body {

height: 100%;
margin: auto;
width: 960px;

}

header {

background-color: lightcoral;
text-align: center;
font-size: 28px;
text-shadow: 2px 2px 2px gray;
color: white;

}

footer {

background-color: lightcoral;

}

footer p {

text-align: right;
color: white;
font-size: 10px;
font-weight: bolder;
padding-right: 10px;

}

aside {

background-color: dimgray;
float: left;
width: 192px;
height: 100%;
color: white;

}

aside p {

padding-left: 10px;
font-size: 14px;


}

main {

background-color: gray;
float: right;
width: 768px;
height: 100%;


}

main h2 {


font-size: 24px;
padding-left: 10px;
color: white;
text-shadow: 1px 1px 1px lightcoral;

}

main p {


padding-left: 10px;
font-size: 16px;
color: white;

}
Any help is appreciated.

Thanks

to post a comment
CSSHTML

4 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumJun 13.2018 — Please post your HTML too.

Unfortunately many resources about web development including tutorials on Youtube are outdated and teach layout by float. Make yourself familiar with flex layout instead:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

This is a demo I created some time ago:

http://webentwicklung.ulrichbangert.de/flex-scrollable-nav-aside.html

It includes a simple nav. If you don't need this, you can omit it.
Copy linkTweet thisAlerts:
@RobHowdleJun 14.2018 — @Sempervivum#1592926 I'm having to do this now! Using float for everything on my website and it does work with some things but go to view in on a mobile device or anything other than my computer and my website content has a disco party!
Copy linkTweet thisAlerts:
@RaguelJun 15.2018 — It looks like you're applying your padding to the footers paragraphs "footer p" rather than the "footer" try putting the padding under the footer selector instead, so it looks like this:

footer {

background-color: lightcoral;

padding-right: 10px;

}

But Sempervivum is correct, HTML along with this would be helpful.
Copy linkTweet thisAlerts:
@seoasJun 17.2018 — It looks like you're applying your padding to the footers paragraphs "footer p" rather than the "footer" try putting the padding under the footer selector instead

[url=https://www.parsaya.com/wedding-hall] [color=#ffffff]تالارعروسی[/color][/url] [url=https://www.parsaya.com/wedding-hall] [color=#ffffff]تالار پذیرایی[/color][/url] [url=https://www.parsaya.com/wedding-hall][color=#ffffff]سالن عروسی[/color][/url] [url=https://www.parsaya.com/wedding-garden][color=#ffffff]باغ تالار[/color][/url] [url=https://www.parsaya.com/wedding-garden][color=#ffffff]باغ عروسی[/color][/url]
×

Success!

Help @Saviourself spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...