Grow your CSS skills. Land your dream job.

Using CSS to layout a website and especially the footer

  • # February 7, 2013 at 10:13 am

    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

    # February 7, 2013 at 10:22 am

    @Flippdesigns, I got your footer back to the bottom in two steps, first, I gave your wrapper a [clearfix](http://css-tricks.com/snippets/css/clear-fix/ “”), 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

    **Edit**: 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/

    # February 7, 2013 at 11:18 am

    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.

    # February 7, 2013 at 11:42 am

    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

    # February 7, 2013 at 11:53 am

    I think you could do this:

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

    # February 8, 2013 at 8:35 am

    thanks Paulie_D i really appreciate your help with this.

    # February 11, 2013 at 1:29 pm

    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;
    }

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".