After watching the very informative video with Cris Pells on the asp.learn website I decided to use Div's instead of Tables to create my website. However I want to keep the same look and feel of the website by making all my pages look the same. I have tried to used master pages with stylesheets and it works fine so long as my content placeholder does not exceeds the sises of one my columns. Is there a way around that? With tables the columns automatically Adjust but with Div's it appears to me that  you have to do all the adjustments yourself. Keep in mind that just like Chris I kept all my adjustment withing the CSS sheet.  Should I go back to using table or is there a self adjusting property that i can use with Div's?

Thank you all for your help.

hi!

you can use overflow: auto property to display scrollbar when content exceeds column size.

<div id="left_column" style="width: 300px; overflow: auto;">

</div>

orzeh 

I would always prefer the CSS route and certainly recommend it if possible, but you've discovered one of the flaws; when inexperienced in CSS it can take longer to get things looking the same as a table layout and looking the same in different browsers. The are great benefits from CSS but you always need to consider what your primary motive is; to get the site finished quickly or to spend longer but have better long term benefits.

If you're going to persevere with the CSS route then it's worth getting a couple of books (anything by Eric meyer, Andy Clarke, Jeffrey Zeldman) and spending time reading some of the css blogs (alistapart). Also, get hold of FireFox and the free FireBug plugin, which is great for CSS - you can edit the CSS live in the browser and see your changes live - great for experimenting.

Essentially divs are containers and expand to fi their content, unless explicitly sized (which can be percentage based). As orzeh says, a fixed width with overflow set will stop it expanding, or you can use a percentage width, meaning it will be a percentage of its container. Beware though, that there are issues with div sizes and content overflowing in IE6, so you might want to read up on the IE6 CSS bugs.

d

I have tried the overflow property and it looks like it can work. However I would like to have the long term logevity aspect of the site therefore i would like to stick to css's and div's. Can i ask then; unless i use the overflow property then my only other option would be to create 1css sheet per web page i put together? I mean is that my only option as far as div's go?  Dave thanks for the reply and the heads up on those books I wil get my hands on a couple of those by the end of day today. I'm not giving up on the CSS just yet I would like to fully understand my option before continuing with the build of the site. Tables seem pretty simple and from a begginers point of view more user friendly, but I dont know that they are the best design available. I'm still trying to educate myself on the pros and con's.

Thank you all for your responses.

You definitely don't need a stylesheet per page. What I do is use Master Pages and have the CSS based layout within the master page; every page that uses the master page then automatically gets the CSS based design. Have a look at http://www.ipona.com/samples/2007/AGN202%20-%20CSS%20101.zip, which is a presentation (with sample) that I do on CSS.

Definitely stick with CSS if you can. It may take more time initially, but the skills you acquire can be reused in other sites.

d

Dave

On my last post what i was trying to get at was , that unless i used the overflow on the CSS sheet, my div's will not expand If my content exceeds one of the column heights.  Is there another way that when i put that Content Place Holder within the DIV that the div will automatically expand like tables do. Othewise im stuck using the overflow which then puts a small scroll bar within my text area which is fine but i was just trying to conceptualize my option.

Thanks for the presentation im going to get cracking on that tonight. It seems like I have alot to learn, and thanks for all the help thus far i really appreciated.

Divs will expand with the content unless you set a fixed size (height, width or both). Consider:

<div id="foo">
    The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
    The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.
</div> 

The div will be just big enough to contain all that text. Set a border on the div to make it easy to see:

#foo
{
 border: solid 1px red;
} 

Now set the width to 25%:

#foo
{
 border: solid 1px red;
 width: 25%;
}

The div is now 25% of its container, but the height expands to contain the content. If you now set a height that is smaller than the content (say 20px), the div now has a fixed height, but the cotnent doesn't fit, so it overflows (except in IE6, where the div actually expands to fit the content). The CSS overflow property defines how that overflow happens, and yes, if the content is too large then you get scroll bars.

Setting borders on elements is a really good way of seeing where elements are. The IE Developer Toolbar (and FireBug) have options to automatically show borders on elements.

Brilliant ill try it out tonight I wanted to have a fixed look for my master page thats why i put a fixed heigth on my left column. I wanted to have menus  on a div with a set height and next to it a content div, that will automatically expand  along with with the left column, depending on  how much more content is withing the div. Thanks for all the Tips I think my answer is definitely the overflow feature.

Thank you much!