CODEWITHSUNDEEP
csspositioning
frrlod
frrlod

Reputation: 6685

Positioning stuff with css, independent of the page size

So I've read a couple of CSS guides and understood most properties, but I still can't position elements PROPERLY.

What I mean by properly: right now I position stuff using specific values ofmargin, margin-right, margin-left, padding, (margin-left:50px), etc... What this means is that my divs are all positioned properly when I view it in my own computer with a specific resolution.

So I hope this isn't too general, but how do I position stuff in a way that they will be in the same relative spot in the page, for every resolution/page size, no matter who and what views it (I guess if it's the same for 99% of cases it's also a good start).

A bit more specific: which properties can I use to position elements in the manner I described?

Here's a link of one of my little projects which are badly positioned (it's all good in my screen, but not so much on others: http://kash.hostzi.com/utopia/minesweeper.html

check out #gameTable's css for example - I wanted to center that and did it in a horrible way.

Upvotes: 0

Views: 99

Answers (2)

Sildoreth
Sildoreth

Reputation: 1915

In your linked example, it looks like you want the gameboard to be centered. If it's a block-level element, such as a div or table, and you want to center it, you can use this on the element itself: 

margin-left: auto;
margin-right: auto;

If it's an inline element, and you want to center it, you can use this on the parent element: 

text-align: center;

If you weren't trying to center it, but just want to have the position scale with the screen size, do something like this: 

margin-left: 10%;
margin-right: 10%;

If you want the position to scale with the font size, do something like this: 

margin-left: 10ex;
margin-right: 10ex;

Upvotes: 1

Ms. Nobody
Ms. Nobody

Reputation: 1219

You can start using percentages. Like:

margin-left: 20%;
margin-right: 20%;

and it will be margined depending on the window(the element in which it is) size.

Upvotes: 0

Related Questions