Css Positioning

[Lefteris]

Hello people,I set out to create a new site after a long time of not doing any web-related programming. I stumbled upon many things which I had totally forgotten but correct cross-browser css positioning is one of them. What's the optimal way to build a site?At the moment I gave certain pixel size for the body tag and all the other tags are positioned relative to it taking up their corresponiding pixel sizes. It works but is it the best choice? What other choices do I have? I tried to go with percentages but I could not make it cross-browser and it was considerably harder than using pixel values.Any tips/ input will be appreciated.Thanks, -Lefteris

[Ingolme]

The best way is not using positioning in CSS. You use the float and margin properties in CSS.

[Lefteris]

Ok I will try and change the site to floats and margins. I guess it won't be that hard since it is not that full of content yet. I really want to do it right.But I have another question. I assume that the divs will still need width and height specified. This must of course be in accordance to the max width and height the body will have. What do most people do? Just make a site with a standard width and height and expect their users to scroll if their resolution is smaller? Or read the user's resolution and change stylesheets?

[Ingolme]

In fact, you don't need to specify a width and height on all the <div> elements.Here's a simple two columns in CSS using floats and margins:

HTML:<div id="left">Left column</div><div id="main">Content</div>CSS:#left { width: 200px; float: left; }#main { margin-left: 200px; }

[Lefteris]

It was a lot easier to change to floats than I thought. I have two more questions. Why is this considered better practise than css positioning? Because it is more cross-browser supportive?And the other question is when you develop a site what do you do about user's screen resolution? Because even with floats you are using some implicit declarations by the use of margins. Do you just make a site and expect the user to see it from any computer or adjust the stylesheet accordingly?Edit: Same question applies to the fonts and resolution correlation.

[Ingolme]

If you just try the two columns I gave you, you'll notice that they will stretch to the width of the screen, no matter what the resolution is. There's one fixed-width colun and one flexible column. It's a flexible layout, that's one reason why it's a good practise.The problem with positioning is that everything has to be pixel perfect and layouts aren't able to be flexible. And often, different browsers may make things slightly different. In a flexible layout, slight changes are not usually a problem since the layout is designed to resize itself to keep in the screen and not overlap other things.If you want to put something below the columns, like a footer, you would add "clear: both" to its CSS.By default, a block-level element will take all the width of its container, it will subtract the margins if there are any, unlike if you had given it 100% width.As for fonts, I recommend using % and em for units rather than pixels. They are relative units, so they will change when the user increases the browser's font size to see things better.

[Lefteris]

Thanks for the tips ingolme. They were really valuable. I really liked the idea of creating the layout with float: and clear and margins. I don't know how much of an advantage that is in web developing but it also makes for cleaner code in the stylesheet :)Thanks again!