2 replies [Last post]
Davehalo1
Davehalo1's picture
Offline
Regular
Leeds
Last seen: 6 years 19 weeks ago
Leeds
Timezone: GMT+1
Joined: 2007-11-19
Posts: 12
Points: 12

Hi Guys,

I'm a beaten man, this has been driving me mad for 3 days.

There is a line of whitespace in between the float container which has the clearfix class attached and the footer.

I can't get the footer to go up and be flush with the floatcontainer.

If someone could advise I would be very greatful.

Thanks,
Dave.

CSS and HTML Code Below -

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

#wrapper {
text-align: center;
width: 100%;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
}
body {
margin-top: 0px;
margin-right: 0px;
margin-left: 0px;
}

#header {
height: 215px;
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
float: none;
background-color: #FF0000;
}
#leftNav {
background-color: #FFFFFF;
float: left;
width: 164px;
margin: 0px;
}
#main {
width: 600px;
margin-left: 8px;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: dotted;
border-left-style: dotted;
border-right-color: #0232FF;
border-left-color: #0232FF;
float: left;
margin-right: 0px;
background-color: #00FF66;
height: 100%;
}
#contentWrapper {
text-align: center;
width: 774px;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
margin-bottom: 0px;
height: 100%;
background-color: #0066CC;
clear: both;
}

#footer {
height: 215px;
width: 100%;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 0px;
clear: both;
background-color: #99CC66;
}

#vertmenu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
width: 160px;
padding: 0px;
margin: 0px;
}

#vertmenu ul {
list-style: none;
margin: 0px;
padding: 0px;
border: none;
}
#vertmenu ul li {
margin: 0px;
padding: 0px;
}
#vertmenu ul li a {
font-size: 80%;
display: block;
text-decoration: none;
color: #004BAC;
width:160px;
text-align: left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #004BAC;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 4px;
}

#vertmenu ul li a:hover, #vertmenu ul li a:focus {
color: #000000;
background-color: #eeeeee;
}

.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Untitled Document

  • Nav 1
  • Nav 1
  • Nav 1
  • Nav 1
  • Nav 1
  • Nav 1
  • Nav 1

Content Goes Here

Content Goes Here

Content Goes Here

Content Goes Here

Content Goes Here

****Break Happens Here****

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 2 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's because of the default

It's because of the default top margin on the paragraph in the footer.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Davehalo1
Davehalo1's picture
Offline
Regular
Leeds
Last seen: 6 years 19 weeks ago
Leeds
Timezone: GMT+1
Joined: 2007-11-19
Posts: 12
Points: 12

Doh! Tyseen thank you very

Doh!

Tyseen thank you very much for taking the time to have a look.

I now have a fush footer!

Kind regards,
Dave.