Padding not applied?

Vel · October 4, 2011

Hey guys, I'm still fairly new to CSS and I don't understand why the padding isn't being applied to create a gap between mainWrapper and footerWrapper. I'd appreciate it if someone would take a look at the code below and explain to me why it isn't working and how to fix it.

HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="theme/default/style.css">
<title>Mafia Online :: Home</title>
</head>

<body>
<header>
    <h1>Mafia Online</h1>
    <nav>
    	<ul>
        	<li>Home</li>
            <li>User CP</li>
            <li>Forum</li>
            <li>Games</li>
            <li>Wiki</li>
       </ul>
   </nav>
</header>

<mainWrapper>
<sideBar>
    	<module>
        	<h1>Module 1</h1>
            <p>This is an example module.</p>
        </module>    
</sideBar>
    <mainContent>
    	<h1>Current Games</h1>
        <p>Below is a list of all the current games running!</p>
    </mainContent>
</mainWrapper>

<footerWrapper>
<footerContent>
    	<p>Copyright ©2011 Mafia Online. All rights reserved.</p>
    </footerContent>
</footerWrapper>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

/*CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End CSS Reset*/

/* Tell the browser to render HTML 5 elements as block */  
header, nav, mainWrapper, mainContent, sideBar, module, footerWrapper, footerContent, error {  
    display: block;  
}

body {
background: #000;
}

header {
width: 100%;
height: 150px;
background: url('images/header.jpg') repeat-x;
line-height: 100px;
}

nav {
margin: 0 auto;
height: 50px;
}

nav ul {
margin: 0 auto;
width: 930px;
padding-left: 2px;
line-height: 50px;
color: #fff;
font-family: BickhamScriptPro;
font-size: 36px;
}

nav ul li {
float: left;
display: block;
width: 150px;
}

mainWrapper {
margin: 0 auto;
width: 930px;
padding-top: 20px;
}

sideBar {
float: left;
width: 24%;
}

module {
width: 100%;
padding: 12px 5px;
background: #FFF;
border-radius: 12px;
}

mainContent {
float: right;
width: 70%;
padding: 12px 5px;
background: #FFF;
border-radius: 12px;
}

module h1, mainContent h1 {
font-size: 36px;
}

footerWrapper {
clear: both;
width: 100%;
height: 50px;
padding-top: 20px;
background: url('images/footer.jpg') repeat-x;
}

footerContent {
width: 930px;
margin: 0 auto;
line-height: 50px;
font-size: 12px;
text-align: right;
}

@font-face {
font-family: BickhamScriptPro;
src: url('BickhamScriptPro-Regular.otf'),
	 url('BickhamScriptPro-Regular.eot') format("opentype"); /* IE */
}

@font-face {
font-family: BickhamScriptPro;
src: url('BickhamScriptPro-Bold.otf'),
	 url('BickhamScriptPro-Bold.eot') format("opentype"); /* IE */
font-weight: bold;
}

h1 {
font-family: BickhamScriptPro;
font-size: 60px;
font-weight: bold;
text-align: center;
}

floridaflatlander · October 4, 2011

I don't understand why the padding isn't being applied to create a gap between mainWrapper and footerWrapper.
footerWrapper {
clear: both;
width: 100%;
height: 50px;
padding-top: 20px;
background: url('images/footer.jpg') repeat-x;
}

I have a hard time with these spaces too sometimes, padding is on the inside of your div. and uses the same background color or image as the div. Margin is on the out side of the div and puts spaces between them. Try margin-top

Vel · October 4, 2011

Using margin-top had no effect. There is still no gap between them.

Vel · October 4, 2011

I managed to get it to work by adding a breaker between the two. Code now looks like:

HTML:

</mainContent>
</mainWrapper>

<breaker></breaker>

<footerWrapper>
<footerContent>
    	<p>Copyright ©2011 Mafia Online. All rights reserved.</p>
    </footerContent>
</footerWrapper>

CSS:

breaker {
clear: both;
width: 100%;
}

footerWrapper {
width: 100%;
height: 50px;
margin-top: 20px;
background: url('images/footer.jpg') repeat-x;
}

Why having the clear: both; seperate from footerWrapper lets the margin work I don't know? Can anyone explain why the first code posted doesn't work (with margin-top or padding-top) and the bottom does?

floridaflatlander · October 4, 2011

Stuff like that can work, sometimes I use <br class="clear"/> then make s style called .clear also try margin-bottom on the main wrapper, when stacked on top of one of another one of the margins takes precedence(I think), I can't remember how it works though. Also when things are floated that also has an effect.

When people start getting online today I'm sure you get more and better ideas.

AyKay47 · October 4, 2011

you can either use the clear: both hack for this or your can set a specific width to the parent div holding the floating divs and add "overflow: hidden" to capture the divs again

Sign In

Padding not applied?

Recommended Posts

Vel

Link to comment

Share on other sites

floridaflatlander

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

Vel

Link to comment

Share on other sites

floridaflatlander

Link to comment

Share on other sites

AyKay47

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information