Well, I'm more of the designer, and I just recently started learning CSS. I can't say that its going bad, but I'm having a little bit of trouble finding some important information, that I'm sure is out there.

I have a design that I created for myself, not too long ago, and I have just begun to convert it into CSS, and making it User friendly . I've had some experience with CSS in the past, however not with the positioning (I'm afraid I am using tables for my current website : O ).

I have two little problems:

#1
I have decided to relatively position most of my div tags, and its all going pretty good. However, after I've done a little bit of positioning, I then go in to add some content, and boom, just like that, everything goes out of place because the div body expands. Is there a safer way to position my content, without having to reposition every time new content is loaded?

Also, I am afraid to use absolute positioning. Don't thing change for different screen resolutions? Is there a way to define the area the absolute positions apply to?

#2
The positions are slightly different in Firefox than they are in IE. What I've done is set some of the ones that were causing me problems with an _ before it, so that IE picks it up. This would allow me to set different variables for each browser. I was wondering if there is a better way to solve my problem.

Thank you for any help

#1
You do not need to and should not position everything relatively. Use the document flow to allow elements to position "naturally" and use positioning only when needed. Using absolute positioning will more likely leave you in more of a mess.

#2
Start with a full, valid doctype to make IE almost behave.
get rid of the underscore "hacks", they will cause problems in IE7 and upwards.
if there is something you have to do for IE, use conditional comments instead

How would I position something that NEEDS to be positioned. IE a div containing the the background image of a header, and a different div contain the background image of another part of the website. Like I said, I've used relative positioning, and when I went back to add a bit of content, everything fell apart on me. I hope you understand what I'm saying.

What is the best way to position? The most friendly, and one that would keep its proportion even on different screen resolutions.

Also, How do I use Conditional statements?

Edit:
Maybe a link to my test page would help you out.
http://70.48.154.81

The point is, you generally don't NEED to positioning for everything, it's simply NOT necessary 99% of the time. For most of my layouts, the ONLY thing that is positioned is my #wrapper div using position:relative. I do that because anything I MIGHT want to position inside of that wrapper, will be positioned relative to the wrapper, and not the body.

Positioning becomes necessary for things like drop down menus, 'stacking' elements, like the elements in the header of this site: www.mdnearyou.com. The logo, the photo and the shell are 'stacked' using absolute positioning. This was necessary due to the nature of the design and what we had to accomplish with it. A single image wouldn't work well, we didn't want Flash, although that was an option.

Again, most of the time it depends on the design whether or not I use positioning (other than the wrapper). You might want to read thru this tutorial on positioning:
http://www.barelyfitz.com/screencast...s/positioning/

Conditional comments :
http://www.quirksmode.org/css/condcom.html

Okay, I've progressed, but I really feel like I'm looking at this the wrong way. I've positioned absolutely EVERYTHING, and have used the float command on most of my div's as well.

I really can't see how I could use the normal flow of the document to display what I want it to.

I've read up on conditional comments, and I will shortly give it a go, but first I want to fix up my original code, so that I don't have to change both (IE and normal style sheets) later on.

I was hoping that the "Float" command allows the div to be not affected by the div's around it. So that if one of them increases in height, the others wouldn't be displaced from their position. Am I correct in thinking this?

Once again, my test site is at http://70.48.154.81

Is there anything you would suggest? Any specific technique?
Thanks again for the help chrishirst and LadynRed

You don't really need to put relative positioning on all the divs you are floating. You can float them, then just use some padding to space it out correctly.

I am not 100% sure I understand what you are asking about floated divs being affected by the divs around it. If you float a div, you are just moving it to the right or left of the div next to it. It will not overlap another div (unless you use z-index), but I don't think it should be affected by the height of the div next to it.

Ok, thank you. This makes sense.

However, Lets say I didn't want to to position anything at all. Is there A way I could achieve the same thing I have now? Or maybe positioning just a few things. Keep in mind, that I have positioned every single div, which is about 5, excluding images, and some text.

What I'm really asking is if my site is just one of those sites where positioning is necessary, or am I just doing it because I don't know another way around it?

Thank you for the help Stephanie! I really appreciate it.

I don't think you would have to position anything at all in your layout. I saw a hidden div that had a z-index on it. That would have to be positioned for the z-index to work. Other than that, I would just use floats and padding and margins to achieve the layout. I don't even think you need the table that you have in there right now. If you wrap everything into a container div, I think you can ditch the tables. Like LadyNRed mentioned earlier, you might position the container relatively, just in case you ever do want to position something inside the container.

What tables?

What is a container div?

Won't the padding, create pads on both the right and left side? If this is so, won't this create nasty spaces between all of my graphics?

Also, How would I position my text? I assume I am to place the text into the dv's with a <p> tag, and use CSS to do the same I have done with the div tags.

However, if I were to use your padding technique (like you suggested), how would I position it?

I think you need to stop thinking in terms or 'positioning'. You need to learn the box model first, so you know just how margins, padding, and borders are calculated.

You put your text inside the divs as paragraphs:
<div id="content">
<p>blah blah blah blah</p>
<p>blah blah blah blah</p>
<p>blah blah blah blah</p>
<p>blah blah blah blah</p>
</div>

Then in your css, you can control how the text is formatted, including the space around them.

#content p{
line-height: 1.2em;
padding: 2px 6px; (top/bottom left/right)
}

Okay, I understand this much, however I can't quite grasp how padding and borders could help perfectly align pieces of an image, that would come together and form the overall picture.

If you add padding to a div or paragraph or whatever, you do not have to have the same amount of padding on each side. For example, instead of putting relative (or absolute) positioning on an element and using "left:40", you could have a div with no positioning and "padding-left:40px;".

So to clarify:

Instead of this:
#div{position:relative;
       left:40;
      }

You can just have this:
#div{padding:0 0 0 40px;}

Here is a tutorial on the box model: http://reference.sitepoint.com/css/boxmodel
HOWEVER, I would not suggest you read through it all right now. I think it might confuse you more. (I do not mean to insult your intelligence, there is just a lot of info there that can confuse anyone). I would suggest looking at the picture towards the bottom. It illustrates the box model. It will give you an idea of what the margins, padding, and borders do. And keep in mind, the size of the margins, padding, and borders do not have to be the same on each side.

Okay, I just drew up this example. It is just a basic layout that will hopefully give you an idea of what I have been talking about.

AHH, I understand. Thank you!

Now, my question to you is; why use this method over the positioning method? As you explained above, they both provide the same end-result.

Why do you have three 0's before the 40px in the following:
#div{padding:0 0 0 40px;}

Originally Posted by andrei155

Why do you have three 0's before the 40px in the following:
#div{padding:0 0 0 40px;}

each number stands for a side of the box/div. So say I have
padding: 1px 2px 3px 4px;

top=1px
Right = 2px
bottom = 3px
left = 4px

Avoiding the use of positioning on everything makes your code more manageable. It also makes it cleaner - less confusing. It also should help out with cross-browser compatibility. I am sure there are more reasons.

You can run into some nasty bugs when you start positioning everything. As already stated, it's just not necessary, it's MUCH easier to use the normal document flow to your advantage and only use positioning when necessary. Simply put, positioning COMPLICATES things, so why make more work for yourself when you don't have to ??

Here's another really good article on positioning and the box model:
http://www.brainjar.com/CSS/positioning/

For the sides of the box, as Stephanie explained above, remember this:
TRouBLe - top, right, bottom left

okay, about the padding. By increasing the padding on whatever side, I can "position" the div as I want it, correct?

so lets say i have this:

 #title {
padding: 20px 0 0 0;
}

This would add padding to the top only, which would do what to my div? Would it move down 20 pixels, or simply increase in height by 20 pixels?

Also, I've read that when padding is added, the background image on a div is also displayed on the padding. So, If I wanted to POSITION something with padding, it would, in fact, get larger?

Would I also be able to use margins instead of padding?

Yes you can use margin instead of padding. In many cases, this is what you want to do. The margin will increase the actual space between the div and another element. Padding creates....well, padding INSIDE the div. So if you put 20px of padding to the top of the div, the content in that div would be shifted down 20px. But you are right, if you use padding and have a background image, the background image would fill the whole div even if you have padding set. In this case, you would want to use a margin.