To begin, I'm a complete novice when it comes to HTML/CSS, so I apologize in advance for my ignorance... I've finished my design (at least close enough for now) in Photoshop and sliced it into a handful of images. Design: http://www.jiggzy.com/newconcept/newconceptdesign.jpg Slices: http://www.jiggzy.com/newconcept/csslayout.jpg I sort of have an idea how to handle putting the page together in HTML/CSS, but I don't know how I should go about laying out the divs, and the rules and syntaxes are giving me some trouble, too. Should I, for example, have one large container div that will hold everything, including left/rightcontaineredge.png and also the header, links, etc? Or should I have a div that contains left/rightcontaineredge.png alone and inside of that another div to hold the header, links, main body, etc? And if the latter is the correct answer, then what about left/rightedge.png? Another nested div? I think the really confusing part for me is stretching the heights of left/rightcontaineredge.png and left/rightedge.png combined with left and right alignment. I've read a bit about floats, layers, z-indexes, and I'm a little overwhelmed...it seems like there could be several ways to do what I want, but I know so little that I don't know what direction is the right one for this example. If somebody could help me get started so that the heights stretch properly and the structure is on par with modern conventions, it would be an enormous help and I think it would give me enough understanding to move on from there. Here is the code I have so far (not much, I know): CSS html, body { margin: 0; padding: 0; background-image: url("images/bgpattern.gif"); background-repeate: repeat; } div#bigContainer { margin: 0 auto; width: 748px; } Code (markup): HTML <!-- ^ all the standard tags ^ !--> <body> <div id="bigContainer"> <img src="images/leftcontaineredge.png" class="floatLeft"> <img src="images/rightcontaineredge.png" class="floatRight"> <img src="images/header.png"> </div> </body> Code (markup): And here's a link to that... http://www.jiggzy.com/newconcept/home.html
A) stop thinking like a designer. B) now, throw your slices out. ok, let's begin IMAGES that are NOT CONTENT should be served in the CSS as background images. So, basically ALL layout related items should never be a part of the source code. img src should be used for CONTENT Images only. now, what you want to do, is to make an image that has your borders for your wrapper, 748px wide, 2 or 3 px tall, and place it in the BG of the wrapping div, with a transparent (or bgcolor) middle kinda like this: <------- 748px----------> |------------------------| |------------------------| |------------------------| |------------------------| so, you end up with code like this: #bigContainer { width: 748px; background: url(path/bg.png) repeat-y; } <div id="bigContainer"> <img src="images/header.png"> </div> if you want to get more involved, technically, the header shouldn't be an img src either. google "Image replacement technique" to get an idea of how to do that.