Using CSS to layout a website and especially the footer

[Flippdesigns]

Hi guys, hope you can help a newbie. im self taught and for my sins i have always used tables to layout (i know i know) anyhoo i have seen the light and am getting my head around HTML5 and CSS3.
So i have inherited a client and with them comes a website that was built by a former company, which uses…you guessed it…CSS to layout.
I understand the fundamentals of it, however when i have added more content to a particular page it has thrown the footer positioning out.
I have been trying all sorts of fixes that i have found so please forgive my sloppy code.

the website is aegpartitions.com and the original page in question is [aegpartitions.com](http://www.aegpartitions.com/maintenance.html)
i know it must be something to do with the wrapper class but im not sure on the difference between the .wrapper and #wrapper, and im pretty sure that there are too many div inside div.

[Codepen link](http://cdpn.io/twlBy “”)

any help would be hugely appreciated, and i can already tell im going to be on here a lot. next thing will be @font-face

[Paulie_D]

Wait…didn’t I do this already?

https://css-tricks.com/forums/discussion/20634/need-help-with-my-page-layout-footer-mostly#Item_12

[Paulie_D]

The issue is that most of the elements inside the wrapper are floated or positioned absolutely, which takes them out of the document flow &/or causes the wrapper to collapse.

The answer to most of this issue is to take the footer OUT of the wrapper, give it the properties

clear: both;
width:990px /* or whatever */
margin:0 auto;

A more involved solution would be to restructure/recode the whole thing as clearly adding content is causing some major issues.

[Flippdesigns]

Thanks to both ChrisP and Paulie_D (apologies for making you work twice as hard) i knew i had asked the question but couldnt find the original discussion.

Im a bit hesitant to restructure the entire site, especially as its live, and i would effectively be learning as i was going.

How do i give my wrapper a clearfix?
I think i will do this in the first instance and then when its fixed in the short term i will use this site as an education tool and restructure it properly.
From looking at the code i think its been built with sloppy code and probably isnt the best thing to use in an effort to learn CSS layout

[Paulie_D]

I think you could do this:

.wrapper:after {
content: “”;
display: table;
clear: both;
}

[Flippdesigns]

thanks Paulie_D i really appreciate your help with this.

[Flippdesigns]

sorry guys still struggling with this, its almost there on most of the site but not on the homepage or the Maintenance page.
I removed the styling from the footer apart from the font and removed the height from the right-side as suggested but it threw the layout completely, it moved the whole site to the right and left all thetext in the centre.
if i can just get the home page and the maintenance page to look the same as the Products page then im good to go, i just cant figure out why its not working for me.

my wrapper looks like this

.wrapper{
margin: auto;
width: 990px;
min-height: 100%;
position:relative;
}

[Author]

Posts