New to CSS having trouble converting design to divs

[kellan4459]

I am new to using CSS instead of table design. I was trying to convert the site

http://www.mphs97.com

to divs instead of the current table design. I am having trouble getting the text to be in the center div as well as aligning the bottom div. I can't get the left, center, and right portions to have the height associated with the body text. And I'm having problems getting the footer to actually be a footer and not have the text go past the footer. I have no problem when I created simple boxes but when I add the text images and backgrounds it all goes awry. Can someone give me a hint or point me to a similar example that may help me understand what I am missing? Thanks for your time.

 

[Vragabond]

Since you did not provide any of your new code, I will have to guess what your problems are based on your short description.

I presume you have designed the CSS version of your site via absolute positioning, a mistake that newcomers to CSS often do. In most normal layouts, absolute positioning is not needed -- it can be very useful for specific elements on the page, but as far as the main layout goes, it should be avoided. This is because absolute positioned elements have no interaction among themselves (or other, non-positioned elements). I like to imagine it like post-it notes in a book. They won't change the paging of the book nor will the text in a book float around the post-it note if we put one in the middle of the page.

For your page, a very simple structure would suffice:
- an outer container
- a header section with the top border that would contain the title and menu (which I suggest you create as separate list element instead of just part of the header graphic)
- the main section with the text on white and borders
- the footer section with the bottom border and the footer links in another list element.

Since your page is fixed in width, I would suggest to simply create graphic elements like the top and bottom curved borders for the header and footer element backgrounds and a white strip with two border colour strips on both sides (1px in height and the width of the text section) and repeat it down the main area. All these elements would not use any special positioning, they would simply be part of a normal document flow. Use margins and paddings to correctly position text and elements on the page and you're done. If you get stuck with something specific, don't hesitate to ask here again.

___________________________________________________________
[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[kellan4459]

Thanks
it seems I may have been over complicating the problem