[dihan]

I'm new to CSS and I'm having the basic of problems. How can I set a div to change its dimensions with its content.

At present I have the shadow (com_shadow) and main area (com_post) which I'm trying to set so it so it will expand with the background color/image depending on the content. I'm sure its pretty straight forward but I've been trying for days with no joy.

http://www.dihan.co.uk/help/test.html

http://www.dihan.co.uk/help/comments.css

You can probably see what I'm trying to do but if not please let me know so I can be more clear.

[Vicious]

haha actually I don't see what you want. Perhaps I'm stupid on this Monday morning

[dihan]

lol. on the 1st one I needed the div shadow on the right hand side to be at 100% height so it would look like the comment area has a shadow and on the second one I need the main content area to be at 100% height (same height as the right hand side patten and shadow).

Please download the file to you comp and open it with dreamweaver and you can probably get a better idea.

Thanks for helping BTW

[dihan]

After weeks on this I found the answer. I'm already thinking of switching back to tables!! CSS is drving me nuts!!

http://www.alistapart.com/articles/fauxcolumns/

[jfulton]

After weeks on this I found the answer. I'm already thinking of switching back to tables!! CSS is drving me nuts!!

Hahah, css is actually incredibly useful and simple once you learn it .

For your "comments" elements, you could simply do something like this:

Code:

.comment {
   width: 400px;
}
.comment .header {
   width:100%;
   height: 15px;
   background-image: url('url/to/image');
}

.comment .body {
   width:100%;
   background-image: url('url/to/image');
   background-repeat: repeat-y;
}

.comment .footer {
   width:100%;
   height:15px;
   background-image: url('url/to/image');
}

Code:

<div class="comment">
   <div class="header">posted by whoever on...</div>
   <div class="body">post information...</div>
   <div class="footer">any footer info if needed</div>
</div>

Of course, this is just mock code, but it gives you an idea of what you could do. If you piece together the background into a few blocks, then it won't clutter up your markup at all. The 'header' div will have the background for the top part of the block, the body will have the repeating side borders, and the footer will have the rounded corner.

Also, in your document, you were using IDs where you should've been using classes. IDs should only be used when the element is unique - when there will only ever be one of them on a page (ie. a footer, or a main navigation block.) A class should be used when there may be more than one (ie. a comment on a post, a gallery image.)

Hope that helps...and convinces you to stick with css!

[Vicious]

Originally Posted by jfulton

Hope that helps...and convinces you to stick with css!

CSS is like quiting with alcohol/smoking: at first it's difficult, but it gets easier

[dihan]

Ha ha.. Puerly on the fact that I've seen great new sites made by it, I think I will have a good try at it.. I'm still learning so I'm sure I will feel more comfortable knowing the restrictions

[dihan]

PS. thanks for the tips.

and also I will try to quite smoking one day.