I've been making websites for fun for 10+ years now, but have never used a div. I'm an old tables-maker I'm trying to get with the times though, and am struggling with a test sample of a page, and had a question.
I'm designing a page that has a main_table div, which holds the header, navbar, and content (pretty simple). The main_table is pos:rel, while the nested divs are pos:abs. Everything is looking fine except for one problem. The nested div's have width of 100%. On one of the div's, there are 2px wide borders all around. The padding of main_table is 5px, but when I add a border to this nested div, it doesn't obey the padding on the right side.
I have set up this page so that you can view it:
An better explanation is written on the page, with a link to the CSS.
Any help is appreciated. Thanks in advance!
Before you get too far with
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
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
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.
Thanks for posting a simple, complete example.
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
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!
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).
You can edit your own posts, but I'll do it this time
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.
Welcome to the world of the Box Model