Good sites for CSS positioning?

[Pherdnut]

I think I'll be getting a migraine soon, trying to find a site that really lays down the nitty gritty on CSS positioning.

What I understand:

Every element is a block.

In straight HTML, everything is an inline element or a block element.

Block elements can be understood as having a line break before and after them.

Inline elements do not and will line up side-by-side.

You can alter the inline/block status with the CSS "display" property.

Attempting to apply these principles to CSS makes no bloody sense to me whatsoever.

Let's say I want to make a 3x3 fixed length/width grid of divs within a larger parent div. How do I do this without nailing them down with absoute positioning. What if I want them to stay that way if the parent div expands or if I want to use JS to automatically add columns and rows without assigning every absolute coordinate so the parent div can be moved around without confusion?

Here's another one: How the crap do I get a block to center vertically within a div without setting the display to table which apparently IE has been oblivious of for years now.

[Ryan Fait]

For centering, add margin: 0 auto; to the element. You might take a look into floats. I'm not too clear on what you want exactly with the lining up of elements, but these may clear up the subject.

http://css.maxdesign.com.au/floatutorial/

[Pherdnut]

Does that center vertically? (up-down)

I guess I was also wondering if there is a way to position elements absolutely using the parent element's coordinates.

[Ryan Fait]

Ah, the only way to center something vertically is with positioning. Even margins are odd when it comes to height. A margin of 50% will assume a 50% of the width of the page even though it may be applied to top or bottom margin. Very odd.

Anyway, to get something absolutely positioned inside a div, add position: relative; to the outer div.

Code: Select all

<div class="outer">
  <div class="inner">
    <p>content</p>
  </div>
</div>

<style type="text/css">
  .outer {
    position: relative;
    width: 500px;
    height: 300px;
    background: #333;
  }
  .inner {
    position: absolute;
    left: 100px;
    top: 100px;
    width: 300px;
    height: 100px;
    background: #aaa;
  }
</style>