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
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.
@Flippdesigns, I got your footer back to the bottom in two steps, first, I gave your wrapper a clearfix, I also got rid of the height in .right-side
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.
. denotes class while # denotes ID, and I agree with you, too many divs within divs
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.
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
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.
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 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
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
@Flippdesigns, I got your footer back to the bottom in two steps, first, I gave your wrapper a clearfix, I also got rid of the height in
.right-side.denotes class while#denotes ID, and I agree with you, too many divs within divsEdit: Here's an article from this site about the difference between ID's and classes http://css-tricks.com/the-difference-between-id-and-class/
Wait...didn't I do this already?
http://css-tricks.com/forums/discussion/20634/need-help-with-my-page-layout-footer-mostly#Item_12
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
A more involved solution would be to restructure/recode the whole thing as clearly adding content is causing some major issues.
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
I think you could do this:
thanks Paulie_D i really appreciate your help with this.
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; }