1

I have a main container div, and I'd like it to be margined from the top of the screen exactly, for example, 10% of the screen width. This way I won't have problems with non-uniform screen sizes etc..

I already found a dirty workaround which is putting a 1px by 1px image of the color of the background, right before the div, and then style it to have 10% of the width of the screen. But this looks quite dirty, doesn't it? Is there any better solution?

Rubens
  • 14,478
  • 11
  • 63
  • 92
Matteo Monti
  • 8,362
  • 19
  • 68
  • 114

2 Answers2

3

Same solution as Rubens without using tables. I've also placed some code to deal with the top margin you were asking about but using padding instead.

<html>
 <head>
 <title>...</title></head>
 <body>
  <div id="content">
   Your whole page comes here...
  </div>
 </body>
</html>


* {
    padding:0;
    margin:0;
}

html, body {
    height:100%;
}

body {
    padding:10% 0 0;
}

#content {
    width: 850px; // replace with your desired width
    margin:0 auto;
}
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
0

The solution I find very elegant is to insert the page in a table, beginning right after the body, and terminating right before it.

You'd have this:

<html>
<head><title>...</title></head>
<body>
<table id="content"><tr><td>

    Your whole page comes here...

</td></tr></table>
</body>
</html>

Now simply decide the size of the page, using the style:

#content {

    width: 850px;
    margin-left: auto;
    margin-right: auto;

}
Rubens
  • 14,478
  • 11
  • 63
  • 92
  • 2
    But surely this is a terrible idea as tables are not meant to be used for layout purposes the way they were 10+ years ago. Tables should only be used to display tabular data. – Billy Moat Dec 24 '12 at 14:05
  • 1
    I really see no problem whatsoever in using a table with this purpose: it's a totally cross-browser solution; it requires no tricksy enchants to make it work; and it does work. Not using something simply because it's old is actually the only terrible thing I'm able to see here. – Rubens Dec 24 '12 at 14:07
  • Here's one of my favourite posts on why not to use tables for layout. I hope it helps change your opinion: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html – Billy Moat Dec 24 '12 at 14:11
  • Thanks for the refers; I'll read the arguments presented later, but I'm quite sure using a table on this particular purpose is not something to be avoided -- mainly considering images were being added from side to side of the page in order to center it. – Rubens Dec 24 '12 at 14:19
  • I honesty can't believe this has been accepted as an answer. Kudos Rubens. – Billy Moat Dec 24 '12 at 14:21
  • This is simply what I have to present here, the best I can make from myself; if you think it's all that bad, I'm quite sure you have a better solution for it, and I'm also quite sure Matteo Monti will gladly accept your answer as the correct one. Why don't you post it? – Rubens Dec 24 '12 at 14:24
  • Alternative answer posted below. – Billy Moat Dec 24 '12 at 15:51