20 Free CSS Containers

Author: Adam Gardiner

11 Feb

I’m back again with more FREE CSS Containers to download. Unlike my previous set of FREE Content Boxes, these boxes were designed to be able to stretch as wide as need be. Simply adjust the size of the container css value to the width you need, or remove it completely to have it auto adjust its width. I have also remade the original boxes in this auto stretch way.

You may use these boxes for any purpose, and you do not have to credit me. However, you may not redistribute these on another website, or hotlink directly to these files.

Black Round DOWNLOAD		Black Square DOWNLOAD



Blue Round DOWNLOAD		Blue Square DOWNLOAD



Green Round DOWNLOAD		Green Square DOWNLOAD



Grey Round DOWNLOAD		Grey Square DOWNLOAD



Olive Round DOWNLOAD		Olive Square DOWNLOAD



Orange Round DOWNLOAD		Orange Square DOWNLOAD



Pink Round DOWNLOAD		Pink Square DOWNLOAD



Purple Round DOWNLOAD		Purple Square DOWNLOAD



Red Round DOWNLOAD		Red Square DOWNLOAD



White Round DOWNLOAD		White Square DOWNLOAD

Filed under: CSS, Freebies, Web Design

22 Responses for "20 Free CSS Containers"

20 contenedores CSS gratis para tu blog | Bitperbit February 11th, 2008 at 8:50 pm 1
[...] Enlace | 20 Free CSS Containers [...]
20 contenedores CSS gratis para tu blog February 12th, 2008 at 3:34 am 2
[...] 20 contenedores CSS gratis para tu bloginfectthesystem.com/2008/20-free-css-containers/ por maxx19 hace pocos segundos [...]
Fepe February 12th, 2008 at 4:40 am 3
I was just looking for something like this to add to a little design I’m doing =)

Thanks!
Adam February 12th, 2008 at 9:36 am 4
@ Fep – No problem. If you need any custom colors or anything let me know. I might be able to help you out.
John March 9th, 2008 at 6:18 am 5
Many thanks for posting these great containers! They are easy to use and look great! Would it be too much trouble to post a “Blue Round” with the same blue that is found in “Blue Square”? Thanks again and keep up the great work!
Adam March 9th, 2008 at 8:42 pm 6
@ John – Sure can! I will actually probably just email you it if you don’t mind.
Adam March 14th, 2008 at 8:36 am 7
Hello John, In case you didn’t get my email, or lose the file, you main download it from here anytime.

http://infectthesystem.com/downloads/stretch_contentbox/blue_round_2.zip
Eric May 27th, 2008 at 9:40 pm 8
For some reason none of these boxes work in Internet explorer 5.5, 7.0, 8.0? Is it just me?
Adam May 27th, 2008 at 9:46 pm 9
Hmm, well I would love to say it’s just you, but stranger things have happened.

They should though, I am relatively sure I validated them before I put them up.

I’m kinda busy tonight, but I will check them out for you tomorrow and if there is a problem I will fix them and shoot you an email with the updated files.

Is there any particular one you are trying to use?
Eric May 27th, 2008 at 11:15 pm 10
I tested this page:

http://infectthesystem.com/2008/20-free-css-containers/

using the site http://browsershots.org , which examines browser compatibility of web sites.

And I saw that these boxes did not appear on MSIE 5.5, 7.0,8.0
Eric May 27th, 2008 at 11:16 pm 11
how can i fix it?
Adam May 27th, 2008 at 11:30 pm 12
Oh, that is part of your problem right there. The page just has images of the boxes, I’m not using the actual html/css code.

The code is super simple, there is no reason why it wouldn’t work in IE. Just give it a try.
Eric May 27th, 2008 at 11:38 pm 13
no wonder!!!
Eric May 27th, 2008 at 11:39 pm 14
that site is strange by the way, for not even displaying images.
traffic ticket November 2nd, 2008 at 8:49 pm 15
Hi,

This is just what I was looking for! Thanks for the great selection. I was thinking of buying some containers like these, but thanks to you I have saved some money

Btw, I found this page by searching for “free containters css” on Google.

Thanks again.
Kris December 1st, 2008 at 11:38 am 16
Awesome resource, thanks! Is there any way to make the bottoms rounded to match the tops?
Mark December 6th, 2008 at 8:23 am 17
I was having problems with the examples I.E. 7….until I changed my doctype to
Matthew Fox March 10th, 2009 at 10:01 am 18
Would it be possible for you to do a tutorial on how to make these boxes? the header images on these boxes? I love them and plan on using them a lot and instead of asking for custom colors it might be easier if i just knew how to make them myself.

Thanks,

Matt
Zena March 16th, 2009 at 2:23 am 19
Hi there,

Thanks for sharing your cool css containers.
I have one problem though. When I copy the css into its own css file and then link to it, the container doesn’t display properly. The header part of it goes all funny. Have you come across this problem before?

It works fine when I leave the css in the same place as the html for the container.

Thanks for any help you may offer!
Adam Gardiner March 27th, 2009 at 2:47 pm 20
@Matthew Fox
Yes I can definitely do that tutorial for you. If you subscribe to my site, it will automatically email when that tutorial is up and running.
Adam Gardiner March 27th, 2009 at 2:50 pm 21
@Zena
No problem, glad you like them.

From your description it sounds like you are more than likely having some type of CSS conflict. I would double check and make sure that you don’t have any css definitions with the same name as mine.

Or possibly you have the boxes inside a larger container that has css styles applied to it that are over riding my css styles?

Or maybe even you have a CSS reset that has messed up the header.

Whatever the case may be, it is more than likely a conflict of CSS styles. I would start looking there first.
Tim April 9th, 2009 at 3:07 am 22
Hi,

Needless to say your containers are just what I was looking for.
I am somewhat of a newcomer to CSS & wondered if you could tell me the CSS/HTML code to implement these boxes. I have done this type of thing with a 3 row table, using the middle row as a bg, but had a gap showing on Firefox?

This is pretty basic I know