DH Templates

Becoming a master of CSS tableless layouts?

I have recently become a web designer of sorts. The first page I made with out the help of built in templates cause me so many headaches its not even funny. And building them with tables just seems to be a bigger headache than building them without. It started out as a header with a nav bar and a content area but no matter what I did the content box keep going under the nav box. That was using float, using position:absolute I was able to put the boxes where I wanted them, but then they wouldn't fill the page the way they were suppose to and if I had to make a major change I had to go thru and change everything. reading the rules that govern that stuff was just more confusing "a box's left side can go no farther than the right side of the lefts right side. unless its the right side the the opposite is true????". Does anyone have any suggestions on how to become a master (someone who know what the boxes are doing). Or any tips or tricks on working with table-less layouts. at the time I think my navbar was something like #navbar{ float: left; width:172px; } and my content was #content{ float: right; } Then in had a pagecell which both sat in #pagecell{ position: absolute; top: 150;/*to account for header*/ width: 100%; } then in my code I had <div id="pagecell"> <div id="navbar"> links blah... <div id="content"> content blah... </div> </div> </div> but when ever the width of the stuff in the content div became bigger than the width i was allowed instead of wordwraping like I thought that it would do it would kick the whole div under the nar bar still don't know why I ended up setting the width of the navbar to 20% and the width of the content to 79.9% just incase(rounding up to 100.1% problem) in the end there was only 5 links total so I just but some buttons on the bottom of the header box its www.alicewingert.com I built if for someone else if anyone wants to see how I faired in the end. Its mostly done as of 10/11/07 an suggestions would be appreciated.

Public Comments

1. Practice, practice, practice. I recommend a good book. I learned HTML with "Head First HTML with CSS & XHTML" By Elisabeth Freeman and it does a very good job explaining the flow of web elements and how things wrap. This is book is geared towards beginners, so if you don't feel like buying the book, go to your local bookstore and read chapter 12. And DON'T EVER use a table to layout a web page, because it makes maintenance a nightmare.
2. msdn is a great resource for an up and coming web designer http://msdn2.microsoft.com/en-gb/asp.net/Aa336613.aspx Yes you should read the above post, tables are mostly obsolete, instead use containers. The basic template is very useful, it follows a step by step tutorial for CSS, as a web designer i can personally recommend it as a very helpful tutorial. The only usage for tables today would probally be master pages, i don't see anything wrong with using them with a seperate style sheet...
3. Mmmm, I would try something like this... <style> .navbar{ positision: relative; bottom: 0px; width: ???px; height: ???px; } then you know the rest also, the tag would be for that <div class="navbar"></div>
4. i tweaked it little. i placed everything in one page so the code look long but the actual HTML is pretty short. also added a couple of tricks to it like static header, no multiple HTML files for the navigation links, and a javascript http://www.geocities.com/omega_archer2003/answers/yoga/wingert.html reduced the CSS to this: body {background:#6666ff; padding:0; margin:0; text-align:center; overflow:hidden} #container {text-align:center; height:100%; width:100%; overflow-y:scroll; position:absolute; top:0;left:0; z-index:-1; padding:212 0 0 17} #header{font:12 verdana;border:1 solid white; border-bottom:none; width:800 } #header h1 { font: italic bold 35px georgia} #content h1 {font: bold 25 georgia} h2, h3 {font: bold 18 georgia} p, li {font:12 verdana;text-align:justify; margin-left:20} #header {text-align:center; background:#8282fb} #menu {border-bottom:10 solid #663366; border-top:1 solid white} #menu a {text-decoration:none; color:black; font:bold 16 times; width:100; margin: 2 -5 1 0; padding:4} #menu a:hover {color:#6666ff ; background:#663366} #content, #telnumber {text-align:left; padding: 0 100 10 100; width:800; bordeR:1 solid white; background:#8282fb} .hidding {display:none}