HOME | DD

ATDE — Cool CSS Trick
Published: 2009-11-27 21:10:09 +0000 UTC; Views: 2491; Favourites: 0; Downloads: 0
Redirect to original
Description body div#devskin0 hr { }

so, in normality when you want a 960px wide body tall section, you would go something like this:



  
   blah
  


  content






but I realised that you can go a step further and go like this:




blah


  content




The difference being the lack of "

". You can do so like this:

CSS

html {
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    text-align:center; /* IE text-align fix */
    background-color:#2c2c2c ;
}
body {
    position:relative;
    text-align:left; /* fixing the IE bug with the text */
    margin:0 auto;
    height:100%;
    width:960px; /* change this width to what you want */
    background-color:#fefefe ;
}


and you end up with a 960px column in the middle of the page.

Related content
Comments: 6

Porkkis [2010-01-14 14:37:56 +0000 UTC]

[link] is a great css framework for 960px wide layouts.

👍: 0 ⏩: 1

ATDE In reply to Porkkis [2010-01-14 14:45:49 +0000 UTC]

I know and use the 960gs

👍: 0 ⏩: 1

Porkkis In reply to ATDE [2010-01-14 15:21:09 +0000 UTC]

Ok, great. I just found it couple weeks ago and used it on my last work. Worked beautifully

👍: 0 ⏩: 1

ATDE In reply to Porkkis [2010-01-19 01:33:12 +0000 UTC]

nice

👍: 0 ⏩: 0

Aaron-A-Arts [2009-11-28 00:07:06 +0000 UTC]

that margin: 0 auto; is handy

👍: 0 ⏩: 1

ATDE In reply to Aaron-A-Arts [2009-11-28 10:32:02 +0000 UTC]

ohhhhh yeah, its my favorite trick ^^

👍: 0 ⏩: 0