I'm new to div's and CSS. How can I change the length of my div's without changing the CSS?

My site link is: http://www.classicengraving.org

I need to change the length of the left & right sides and adjust where the bottom needs to be placed on various pages within my site. How do I go about this?

You're not going to be able to do much w/o trouble because of the extensive (overuse) of absolute positioning. If you want a more fluid layout, you're going to have to get rid of the absolutes.

Ok, thanks for the tip. I'll try to get rid of those. What should I use instead, relative?

If you can, try to use neither relative or absolute. I've made many websites using just floats and margin.

- Steve

How do you do that? I'm using Dreamweaver and my options for position are relative, absolute, inherit, fixed and static. I'm new to CSS so I don't know all that much...

Static is the default, and indicates no positioning. You don't need to indicate any positioning rule at all for it to end up static. It would be best for you to avoid using the design view in Dreamweaver, if you can, as you will learn a lot about how the code works if you do.

Actually I usually don't use the design view, most of the time I use the code view. I was used to using just plain html code in Notepad and then was introduced to Dreamweaver about 2 yrs ago when I became a graphic designer.

Here is something that I real quickly put together. it's a page similar to yours without using any positioning at all. Also, the way I put the corners on the page is how I would recommend you do it.

classicengraving.zip

Hope it helps!
- Steve

Thank you, I'll have to experiment with that type of layout.

I've just been experimenting with your code. The only problem I'm running into is when I use a <p> or <h1> tag I get a black space going across the top. Is there a way I can use CSS or do I have to use html to fix this issue?

Ahhhh I don't understand why I get a black strip across part of my page. It has something to do with the CSS I guess... when I remove the <p> and use <b> instead then the problem goes away. However, then my line heights are messed up in Firefox. The odd thing is in the "acrylicawards" page (listed below) when I remove the <h1> and replace it with <b> it fixes the black bar going across the top but there is also one @ the bottom I can't seem to get rid of. Any ideas??...

Here's two links where I'm having the problems:
http://www.classicengraving.org/clas.../indexnew.html
http://www.classicengraving.org/clas...licawards.html

It's because your <p> tag and your <h1> tag both have a preset margin. With a margin, the tag you are using pushes any divs that are in the way of its margin away, thus causing the black bar to appear. In your pages with any H1 tags I would recommend using the following CSS:

h1 {margin-top: 0px;}

And if want to fix your <p> tag problem, you don't need any additional CSS. I would simply recommend this: do not use a <p> tag on either your first paragraph or your last. You do not need the additional spacing that the <p> tag supplies, because the 'topcorners' div and the 'bottomcorners' div provide that spacing already.

- Steve

Ahhh, thanks for explaining that to me. I didn't even think of the margins on those tags. I just have one small problem, at the very bottom of this page http://www.classicengraving.org/clas...licawards.html
the black bar is showing up and I'm not sure why. It appears in Firefox but not IE.

I'm not entirely sure, but it's probably the </p> tag at the end of your page.

- Steve

Actually I took that out & it didn't make a difference so I put it back in. Grrr, I don't know why it's being such a pain in the arse!

I've been trying to figure it out, and I'm still not quite sure what the problem is. If all else fails, you can just put in your stylesheet:

p {margin-bottom: 0px;}

And put in a <br /> where it looks kinda messy.

- Steve

Sorry, but you really need to fix this:

<ul id="qm0" class="qmmc">

You have it multiple times and ID's MUST BE UNIQUE. You can make "qm0" a class, you CAN have 2 classes on an element, it would be <ul class="qm0 qmmc">

I suspect the blank space is from the <p> default margins and/or padding.
All that shouldn't be in a paragraph anyway, it should all be in a list, or even a definition list.

Ok, that's what I've done. Thanks for your help! Also, what do you think about the load time? As I recall hearing, div's are supposed to load faster than tables. There's less code involved too, correct? I'm trying to optimize my site to the best of my ability. Do you think is an improvment over the table version (for example: www.classicengraving.org/samples.html)?

Yes, the new page is definitely faster loading.