[Solved] Borders on nested divs destroy disobey padding

Before you get too far with this - lose the absolute positioning (and the relative is unneeded here as well). Learn to use margins and the document flow.

Hmmm, I spent several hours yesterday going over CSS tutorials, and most seemed to suggest this way of doing the nested divs: use a pos:rel div for the 'container' and absolutes or relatives for those inside.

It's hard to find many good CSS tutorials on the web. Do you have any further suggestions?

Thanks for the reply, wolf.

Sorry for posting twice in a row, but I have gotten rid of all position calls, relying instead on the flow.

I'm still getting the hang of this, but I believe this is what you meant. My problem, however, still remains.

Bpops,

Thanks for posting a simple, complete example page. It really makes it easier for us to look at the trouble.

Regarding vertical centering inside #navbar:
* Don't specify the height in px. Instead let the content inside #navbar force a height, and set equal top and bottom padding on #navbar.
* Try setting a line-height. (http://csscreator.com/node/25082)
* There are a few more methods for vertical centering in the forums - check out http://csscreator.com/forum/2?page=1 .

I don't see any issues with the alignment of the #content div. (I looked in FF2 and IE7.) #content would be 100% the width of the page, except that it's pushed inside 6px by the padding of #main_table. The 2px border on #content then pushes the text in by 2px more, because borders also take up space. Perhaps you're just not used to how the box model works? Take a look at this article (http://jessey.net/simon/articles/003.html) for a good description of the box model.

Lastly, I don't think you need the clearfix class on any elements anymore, since there's nothing floating.

On the other hand, it could be that I'm not understanding how you expect the page to look. Could you post a screenshot of how you're intending it?

Congrats for taking the leap to CSS from tables. It will be a challenge, but I think it's worth it.

Katie,

Thanks for the tips on vertical line centering. I don't want to allow the div to set it's own height, because I want to use a background for it that looks right only at 35px. But I'll read these other methods.

As for the padding issue, it's my fault I didn't post here sooner enough, but I fixed it. (So a mod can tag a [Solved] to this post). The problem was that I was setting a width: 100% on the divs. First of all, this is redundant I suppose since by default divs fill all available width. Secondly, I guess the way it works is when you set 100%, it creates the width, THEN draws the border, THEN places, which causes it to not center properly.

And you're right, I don't think I need the clearfixes. I'm still learning and wasn't sure if I needed them or not.

Thanks for the help!

You can edit your own posts, but I'll do it this time

Welcome to the world of the Box Model