Yes sorry for the late reply but been away all weekend. Shout if you are still stuck.
I became so frustrated and angry over css and html I fell pray to a knee-jerk reaction and paid $385.52 to use the GoDaddy WebSite Tonight web design.
That’s WORSE than understanding what little I’ve learned so far of html and css.
I am working with just a few text and picture items for my index.html home page trying to get them positioned.
In the html page view all items seems to stack up against the left side of the #outer declaration and I can’t effectively place them where I want to.
I’m trying to understand in Ian Lloyd’s book when I should use a BOX model, positioning absolute and how margins and padding fit into all of this.
I’m still in a chaotic state of mind but I must figure this out.
So. . . . .in css . . . what do these actually do, and how do they help the page design?
html, body {margin:0;padding:0;}
also . . .
#outer {width:90%; margin:auto;max-width:1200px;
min-width:600px;
}
this seems to display the boundary (width) of the page, correct? I have objects outside of this boundary! A picture and some text.
#content {
overflow:hidden;
margin:0 0 2em;
padding:10px;
}
don’t know what this is?
#content p {
text-align: justify;
line-height:125%;
margin:0 0 1em;
text-indent:1em;
color: #fff;
}
don’t know what this is in relation to the Content above?
* html #content {
zoom:1.0
say what?
Thanks Rick
Where do you want them to be?
Block elements naturally follow one another vertically down the page and you can space them out with margins where necessary.
If you want horizontal alignment of block elements then most times you will need to float them as I mentioned earlier in this thread. (I mentioned earlier that you should study floating and all its implications as the is no short-cut to learning I’m afraid. It’s practice,practice and more practice. There’s no point in getting angry about having to learn something.
It’s not rocket science but just like learning a language you have to know the rules and at least know all the right words and then you have to put the words in the right place. It’s a steep learning curve and takes months, (even years) to digest fully and even then there is still much to learn.
I’m trying to understand in Ian Lloyd’s book when I should use a BOX model, positioning absolute and how margins and padding fit into all of this.
You don’t use the “box model” as such. It’s a term that describes how an element is made up in respect of width + padding + borders + margin. An element may be 500px width but if you add padding and borders then it will take up more space on the page than 500px because the padding and borders are added on top so that the content space doesn’t diminish.
Absolute positioning removes the element from the flow and is rarely used for structural layout. It is mainly used in controlled situations where the flow of the page is already controlled by other content and you want to place something say in the corner or outside the current context but without interrupting the flow. Once you place something absolutely then you have to make sure that all other elements do not just run over the top of it so use with care.
Margin is the space between the border (edge) of one element and the border edge of an adjacent element. Padding is the space inside the border between the border and the content. You can see the relationship clearly in the diagram on this page.
Margins just move elements away from each other (or with negative margins they drag over each other). Margins collapse in some instances and is a complicated subject that needs a thorough understanding.
Floats allow block elements to sit horizontally but they have many peculiar behaviours so you need to read up on them and practice with them before you can apply them correctly.
html, body {margin:0;padding:0;}
also . . .
That negates the default margin and padding that some browsers apply to the html and body elements by setting them both to zero.
Nearly all elements have some sort of default margin so you need to control this as all browsers vary ion what they think a default should be.
#outer {width:90%; margin:auto;max-width:1200px;
min-width:600px;
}
this seems to display the boundary (width) of the page, correct? I have objects outside of this boundary! A picture and some text.
That sets an element to 90% of the width of its containing block.
The min-width and max-width do exactly as they suggest and ensure that the element is no bigger or smaller than the dimensions specified.
The margin:auto will center a block element that has a width defined. It works by making sure that the side margins are automatically equal. If they are equal and the box has a width then the element is automatically centred (the same does not apply to vertical margins as height is more complicated).
#content {
overflow:hidden;
margin:0 0 2em;
padding:10px;
}
don’t know what this is?
The overflow:hidden will clip any content that extends out of the container (it will not clip absolutely positioned elements that extend out of the container unless a stacking context has been set with position:relative on the parent). Overflow:hidden will also contain any child floats which is what it is commonly used for these days. Floats are removed from the flow and an element that holds only floats will be zero height high unless you contain the floats somehow. Overflow:hidden is one way of doing this when you don;t need visible overflow (there are other methods - see css faq on floats) .
The margin shorthand applies a 2em bottom margin which will push anything away by 2 ems (ems are based on the font-size of the element concerned.
#content p {
text-align: justify;
line-height:125%;
margin:0 0 1em;
text-indent:1em;
color: #fff;
}
don’t know what this is in relation to the Content above?
Any p element that is inside a container called #content will have those rules above applied to them.
The space between #content and p is called a [descendant selector](http://reference.sitepoint.com/css/descendantselector) and selects children of that parent.
* html #content {
zoom:1.0
say what?
Thanks Rick
That's a hack for IE to give the element haslayout. [Read this thoroughly](http://reference.sitepoint.com/css/haslayout) as it explains it all in minor detail.
You can't expect to learn everything in one go so don't get angry with it. You must take your time, practice and gradually it will start falling into place. CSS isn't hard but it's not easy at first I agree.
It does however have rules that need to be learned and understood before you can apply them properly. As I said earlier its like learning to speak a language where you can't take random words, throw them into a sentence and expect them to make sense. The words may be spelled correctly but you still end up talking rubbish :)The other thing I would recommend is take a day or so to sit down and read the book cover to cover. I’m not familiar with Ian Lloyd’s book, but a lot of people come here citing the book and laying out their pages with absolute positioning. I’m assuming they’ve only read a little way into the book and stopped before getting the whole picture. It’s really important to get that overview and see how everything fits together, and which tools are suited to what purpose.
As long as you read a CSS book cover to cover, you should have a good overview of the subject. I only wish I could say the same for JavaScript and PHP! 
Ralph & Paul - thanks very much.
I did read the entire notation on the MSDN hasLayout.
My simplistic translation is that I can’t solely rely on the parent layout parameters to flow down to the child, and that in some cases just providing a little layout definition to the child element will correct the problem.
I’m actually experiencing that right now with text not flowing around a picture.
I’ll let you know if I figure it out.
Thanks much. Rick
It’s a steep learning curve and takes months, (even years) to digest fully and even then there is still much to learn.
More than 4 years over here, Rick. Still learning.
I’m not familiar with Ian Lloyd’s book, but a lot of people come here citing the book and laying out their pages with absolute positioning.
It’s a test part Lloyd had you do to show you how, at first, all the elements stack on top of each other in the upper left-hand corner of the page (you just put position: absolute on them and no coords). This didn’t work for me when I was going through the book because I had something like
id-“something” instead of the =. Something I couldn’t easily catch back then.