Hey guys,

I have been doing a lot of reading about css positioning. I have taken what Lady and Chris have said about not using absolute positioning except for in specific situations and made my page have a normal flow with only using absolute positioned div's inside of relatively positioned divs.

The problem that I am having is getting my layout to be at 0px from the top.

You can clearly see what I am talking about by visiting http://bestwayheat.com.

You can also see the stylesheet and source by right click > view source.

The div that I am trying to get put to 0px from the top is .bigcontainer. I am not using any kind of positioning on this div. If I put absolute positioning on it I can get it 0px from the top, but then however, i cannot center my layout.

I'm not sure where I am messing up at because I have done a similar layout and have not had a problem with it.

Brandon

set the body margins to 0

Hmm this was really weird. I had tried that before posting, but tried it again and it worked the 2nd time that I tried after you told me to.

body {
background-image: url(images/mainbg.jpg);
text-align:center;
margin-top:0px;
}

Anyways, problem solved. This ended up fixing it. Although I'm not sure why it didn't work the first time.

Is there a difference between margin-top: and top:? I'm not sure when to use each of these. Normally, if one of them doesn't work I try the other.

top is a positioning property and will only affect positioned elements. It has the effect of setting the top left corner of the element X units down from the top left corner of the parent element.

margin-top determines the amount of clear space between the element and the bottom edge of the preceding element(s) (or the inside top edge of the parent element)

Whoops forgot to add;

It may not have applied the changes because the CSS file was cached by your browser.

If you are editing CSS, ALWAYS clear your browser cache AND force a "hard refresh" by using Ctrl+F5 on the page.

made my page have a normal flow with only using absolute positioned div's inside of relatively positioned divs.

I hate to burst your bubble, but you haven't at all. You're still using positioning, relative and absolute, where it simply isn't necessary. A 'normal flow' document would not be that way.

I made my page with absolute divs inside relatively positioned divs. I have tried to figure out how to do the page without using absolute and I honestly think it is more work for a lost cause if I can get it to position correctly the way I am doing it. The 2 textbooks that I have read both teach this way. It took me a while to realize what absolute positioning actually is, and if it is placed within a relative positioned div it will appear at the same place every time regardless if it is in IE or FF.

The way I am doing it..

navigation = relative
boxes inside navigation = absolutely positioned in relation to the relative navigation div

boxes = relative
content within the boxes = absolutely positioned in relation to the relative boxes div.

content = relative
content within the content div is absolutely positioned in relation to the relative content div.

bottom = relative
content within the bottom is absolutely positioned in relation to the relative bottom div.

footer = relative
content within the footer is absolutely positioned in relation to the relative footer div.

I do have another problem. It isn't so much of a problem as it is a question though. I have created block divs for my navigation buttons. The navigation is only a background-image. I want to make the block div's have a link to the respective page that they belong to. I have turned borders on for these divs so that you can see what I am talking about.

EDIT: http://www.bestwayheat.com (temporary domain)

Is there a way to make a block div, rather than inline, with no content have a link?

Also, my id readmore displays the way I am wanting it to in FF, however not in IE. I don't know why it is not displaying properly in IE but I will mess around with it. I think my body a:link is overriding my #readmore id for some reason.

and I honestly think it is more work for a lost cause if I can get it to position correctly the way I am doing it.

Doing a site without all that positioning is far from a lost cause and hardly more work. It also doesn't trigger IE's nasty nasty positioning bugs. While you may have textbooks that teach ONLY positioning, there are far more that do NOT teach that way. Unfortunately, what I've seen being taught in schools is about 10 years behind the REAL web design world.

What I said was you were not using the 'normal document flow' at all, not with all that absolute positioning - even if it is inside a relative-positioned element.

Is there a way to make a block div, rather than inline, with no content have a link?

You cannot make a div a link - you can't wrap a block-level element inside an in-line element, it is not valid.