In HTML, if you don’t specify a specific width, block-level elements are vertically expandable by their nature. Think of an unordered list. That list will grow be be as big as it needs to be to fit all of it’s list elements. If a user increases the font size in their browser, the list will expand vertically, growing to fit the larger content. Sometimes it feels like vertical-only expansion is limiting and it would be nice if the element could grow horizontally as well as vertically with a font size increase by the user.

View Demo Expandable Box

Download Demo ZIP

Abstract

If you have been using  the Firefox 3 beta much, you might notice that it handles this automatically. Increasing the size in Firefox 3 doesn’t just increase the font size, it increases everything in size, which actually feel really natural and nice. But despite it’s growing market share, we can’t count on Firefox for the resizing needs of our users.

I am going to attempt to explain how to make an All-Expandable box, with the following features:

  • Works in all major browsers
  • Expands both vertically and horizontally
  • Uses a single background image

Demo animation

This is a bit of a tall order, especially the use of the background image. This will end up using kind of a combination of the CSS sprites technique since different areas of the image will be used in different places and the Sliding Doors technique, since different amounts of those images will be visible depending on the current size.

Make the box horizontally expandable

There is one way simple way to make a box horizontally expandable: specify your width in em’s. For example:

.box {
  width: 35em;
  margin: 50px auto;
}

The margin is there for example purposes, to keep it centered and away from the top edge of the browser window.

Thinking about image placement

In this example, the box has rounded corners, a bit of a drop shadow, and a bit of an inner shadow. This means that all of the four corners of the box are distinctly different. This is uniquely challenging since images are not expandable. We will need a way to apply the four different corner images to the four corners of the box separately.

Also, we will need to overlap them in such a way that the transitions are seamless. And also, we are trying to do this with only a single background image, to make it as efficient as possible.

Below is an image of how you might think of what we need to do. The boxes would be overlapping, I nudged them apart so you can see the whole boxes.

Position example

When creating the background image, think big. The bigger your background image, the larger you will be able to expand without borking the layout. The example background is 700px wide which gets you about 4 or 5 different text sizings it works at, but it does eventually break apart above that.

Coding the box

Of course we always like to be as semantic as possible with our XTHML. That means not using extra markup for things that aren’t really content but are purely design. Unfortunately, with all this craziness of needing four boxes for our single box, it ain’t gonna happen.

This is how it’s done:

<div class="box">
  <div class="topleft">
  <div class="topright">
    <div>
       CONTENT GOES HERE
    </div>
  </div>
  </div>

  <div class="bottomleft">
  <div class="bottomright">
  </div>
  </div>
</div>

Styling the box

Here is the CSS for the four areas within the box:

.box div.topleft {
	display: block;
	background: url("images/box-bg.png") top left no-repeat white;
	padding: 2.0em 0em 0em 2.0em;
}

.box div.topright {
	display: block;
	background: url("images/box-bg.png") top right no-repeat white;
	padding: 2.0em;
	margin: -2.0em 0 0 2.0em;
}

.box div.bottomleft {
	display: block;
	height: 45px;
	margin-top: -2.0em;
	background: url("images/box-bg.png") bottom left no-repeat white;
}

.box div.bottomright {
	display: block;
	background: url("images/box-bg.png") bottom right no-repeat white;
	height: 45px;
	margin-left: 3.0em;
}

Note the negative margins are necessary to pull back from the padding applied from the parent spans. It just works out good that way with the padding, keeping text inside the box. Also note the height of the bottom spans are set in pixels. That is on purpose as they need to be kept short and not be expandable.

This has been tested in Firefox, Safari, Opera, and IE 6 and is working in all of them, so I’m fairly satisfed it’s a solid technique.

Credits

This tutorial is contributed by Chris Coyier. Visit CSS-Tricks to learn more CSS tricks from Chris.

Update:

The code in this example was updated to fix the div within a span issue and now validates.

152 Comments

JK Mohr
Dec 7, 2007 at 2:30 am

Nothing new, but good nonetheless

David
Dec 7, 2007 at 2:36 am

yeah, rounded corners, good illustrated!
the last three days i fight with the IE6 PNG Problems… :) I’ll habby that works now on my new page… puh…

Joefrey Mahusay
Dec 7, 2007 at 3:21 am

This is nice though, I gonna apply this on my XHTML and CSS website projects.

Thanks for this tutorial Nick! Keep up the good work :)

Snork
Dec 7, 2007 at 3:32 am

Good techinque!
But it’s not good to put block “div” into inline “span”, it’s not valid. Perhaps, will be better to use “div”, if we want to use block elements inside “topright”.

Dragan Babić
Dec 7, 2007 at 3:34 am

Bad example, you can’t put a block level element (a div) inside of an inline level element – a span. Also it is not good having two completely empty non-semantic elements. Check out this article I wrote some time ago (it’s in Serbian, but the example is what you’ll be interested in), I am using a definition list to mark up a comment (just as an illustration) that is as semantic as possible and uses as little markup as possible.

Zeb
Dec 7, 2007 at 4:14 am

“But it’s not good to put block “div” into inline “span”, it’s not valid.” +1 but I prefer sliding doors !

Darren
Dec 7, 2007 at 4:14 am

Good example although I’m not a fan of using none semantic markup I can understand that achieving this any other way is near impossible without CSS3 or other technologies.

breaker
Dec 7, 2007 at 4:22 am

OK – up to a point. If the text size gets to large then the whole thing ends up looking like a dogs breakfast. Tested on Windows in Firefox, IE7

Glow
Dec 7, 2007 at 4:25 am

Firefox 3 is not the only one to scale everything when increasing the text size, ie7 and opera 9 do the same. I think the zoom thing must be achieved by browsers, this code is not semantic at all. Interesting experiment anyway.

Squawk
Dec 7, 2007 at 4:27 am

Very nice, but it breaks in Safari 3 at a certain point. (keep enlarging the text..)

Jan
Dec 7, 2007 at 4:34 am

interesting. thank you.

Mark Abucayon
Dec 7, 2007 at 4:50 am

I have to try this one.. this is fantastic. great tutorial out there. I love the site also. Thanks for sharing this with us.

fqch
Dec 7, 2007 at 5:15 am

goog enjoy!`iam chinese.^_^

Milan
Dec 7, 2007 at 6:57 am

Hi, that’s very useful and interesting! Thanks a lot for this tutorial.

Dustin Brewer
Dec 7, 2007 at 8:56 am

Yeah I kind of agree with the rest of the crowd about the placing of a block level element into an inline level element. That isn’t valid HTML/XHTML. Interesting idea though.

!an
Dec 7, 2007 at 11:00 am

why bother with the spans? with that content, you’ve got four hooks, which is all you need for an expandy box with unique corners

brad
Dec 7, 2007 at 4:43 pm

I agree with the comments about the valid code and empty spans. I’ve utilized similar techniques using all divs but found the excessive code to be messy.

The best solution is to write javascript to add in the extra divs, keeping the html code simple and just living with the fact that if js is off then it won’t be as cool…

Dang - CSS Questions
Dec 7, 2007 at 5:40 pm

It does not work when zooming too large or too small in FF, or when using a large image in the content.

Will
Dec 7, 2007 at 5:56 pm

nice to see another tutorial with a different slant on an old problem…

Ken Deifik
Dec 7, 2007 at 10:01 pm

The example page broke at three expansions, using Firefox 2 on XP.

Screenshot sent on request.

Edmonton Web Design
Dec 8, 2007 at 2:21 am

goog enjoy!`iam canadian.^_^

Johan
Dec 8, 2007 at 7:29 am

As I think someone said before be, Opera (latest I think) and IE7 also increases everything, instead of just font. (note that it says “zoom” instead of text size)..

Pretty interesting code though, great tutorial :)

Allen
Dec 8, 2007 at 12:41 pm

Thanks again, you are the top!

Wypoczynek
Dec 8, 2007 at 1:15 pm

beauty :-)

Andrei Gonzales
Dec 8, 2007 at 1:43 pm

It breaks after two resizes on gecko browsers…

(This is what happens when you don’t test on other platforms and browsers as well)

JackieZhang
Dec 9, 2007 at 12:30 am

你的设计真酷!
you cool !

Alex
Dec 9, 2007 at 7:21 pm

Its list elements.
It’s = it is, and “as it needs to be to fit all of it is list elements” is probably not what you meant to say.

Sara Susan
Dec 10, 2007 at 7:10 am

Well its nice sharing, i also find a good link which i m sharing with u all http://www.eyecatchypics.com

Chalo
Dec 10, 2007 at 10:57 am

I just replicated your box, but I had to adjust the top-right corner left-margin as it was too far away from the left border because it started to show in the the top-left corner. Maybe is the image, I had to give enough margin (15px) to set the drop shadows. Still not exactly like your tutorial but is a good start, this is in IE6. Great tutorial by the way!

Sverri
Dec 11, 2007 at 12:28 am

It doesn’t work in IE7:

http://www.sverri.name/upload/IE7.gif

aj
Dec 11, 2007 at 9:29 am

Interestingly this site doesnt scale when text is resized!

Slavo
Dec 11, 2007 at 11:01 pm

Doesnt work in IE6!!!!

TefoZi
Dec 13, 2007 at 12:31 pm

Doesn’t work well under Firefox/Linux :(
But looks nice!

Mike J
Dec 15, 2007 at 6:01 am

well its cool one!

Stubbornella
Dec 19, 2007 at 1:42 pm

I really like the CSS Mojo approach to this kind of expanding glowy box. It works with transparent png, though obviously you have to provide an IE6 fallback design. Leslie’s code is really clever so I thought I’d share. http://www.lesliesommer.com/wdw07/html/#glow-wrapper

Jessica
Dec 20, 2007 at 10:38 pm

…if you don’t specify a specific width, block-level elements are vertically expandable…

Should that read “a specific height

5ivedance
Dec 21, 2007 at 9:44 pm

The page broke at three expansions, using Firefox 2.

Tom
Dec 23, 2007 at 8:16 am

Great solution. Thanks for sharing your knowledge.

Bundini
Dec 25, 2007 at 8:10 am

This is a workable solution. Probably the best supported solution. However, it’s less than ideal because it breaks semantics and fuddles up your code with divs strictly devoted to visual presentation.

There is a way to do this with a div, or p, and no additional markup. Unfortunately, because of flaky CSS 2 support amongst browsers, it doesn’t always work. The trick is using the :before and :after pseudo selectors along with generated content (via the css content attribute).

ALi SEVİMLİ
Dec 26, 2007 at 12:19 pm

Very nice! Thanks.

Joomlabased
Jan 1, 2008 at 5:44 pm

Thank you for this great solution.

ray
Jan 2, 2008 at 9:22 pm

div.bottomright error in my ie7,but the idea is very nice ! I will try it. thanks

Uxma
Jan 5, 2008 at 1:47 am

Thanx for sharin! its grt one

Kings Design
Jan 14, 2008 at 12:14 am

Great tip that I have used once already.
Thank Rik

DottorZed
Jan 21, 2008 at 2:47 pm

Very nice but don’t work on IE 6 !!!

almog media design
Jan 24, 2008 at 11:07 am

Heres a question how could you create a hole site to expanded with the text size of different users. Example on my site if the user was to change the text size, making it bigger then it well push down and overlap the design which look very bad.
How would you solve something like that , or in general what would be the best way to make a site that well work in all browser size , screen size and text size’s?
Would love to ideas or comments via email at almog00@gmail.com

elvisparsley
Jan 25, 2008 at 1:52 am

yeap, it’s cool. but it doesn’t work on IE7 and it breaks in firefox after 3 steps. Thanks for sharing.

Andrew Bexx
Jan 25, 2008 at 8:32 am

I also noticed it doesn’t work in ie7, the bottom right div brakes apart. But I have a simple fix, not tested this on other browsers so let me know if this works on anything other than ie7. Here it is:-

Add the following “margin-top:-0;” as in the CSS below:-

.box div.bottomright {
display: block;
background:url(“images/box-bg.png”) bottom right no-repeat white;
height: 45px;
margin-left: 3.0em;
margin-top:-0;
}

jon
Jan 31, 2008 at 3:27 pm

doesn’t work in IE 7. Looks like crap.

James M
Feb 5, 2008 at 8:02 pm

Absolutely great web site. Well done

chris
Feb 5, 2008 at 11:44 pm

this sucks, why the hell do people idolize you?

Marlyse Comte
Feb 8, 2008 at 10:55 pm

Great site, love the design and good article!

Maa-ku Online
Feb 28, 2008 at 9:32 pm

Thank you for sharing! Great Job!

Fred
Mar 3, 2008 at 9:21 pm

Would be great to say why you actually use em’s for making a layout like this.

1em = 100% of the computer’s font-size. Usually the default font-size is 16px, so 1em = 16px. By using em’s instead of pixels, you can really reach every configuration.

posicionarsitio
Mar 13, 2008 at 3:58 am

Let’s see …. It is FAB! I really love it but as a matter of fact I think I cannot use it very freq.
Love it!

Thanks a lot
posicionarsitio

efectivaweb
Mar 13, 2008 at 3:59 am

Really nice. I love it!!!
efectivaweb

petnos
Mar 16, 2008 at 5:10 pm

good job. its working well.

Joey
Mar 28, 2008 at 5:11 pm

Doesn’t work everywhere. Stop claiming that it does.

Secondly, Dear Andrew. We do not use negative margin in the professional world. Even if you are applying a negative margin to a zero value… which makes no sense in the first place.

Matthew
Mar 31, 2008 at 12:39 am

Yep – looks like crap in IE7.
I always cross (browser) check things before posting for public view…

I
Mar 31, 2008 at 12:52 am

Yep. Bad in IE7

PawelGIX
Apr 15, 2008 at 4:30 pm

Fix for IE7

.box div.bottomright {
margin-top: 0em; /* add this */
}

virtualnetia
Apr 22, 2008 at 5:14 am

Good job and greate site !

miniak
May 10, 2008 at 7:14 am

I love it! Thanks a lot !.

Geison
May 24, 2008 at 7:51 am

Thanks !!

quongdang
May 29, 2008 at 1:19 am

hixx hixxx… it’s not work correctly in IE. Why so???

NGP
Jun 6, 2008 at 8:45 am

Hey guys!

I must say nick I have been a huge fan of your sites for a couple years now, and am always impressed with the content, tutorials and discussion on this site, so please keep up the good work. Been getting people to visit your site as well for their web and applications tutorials as well, and you got me into Considering WordPress as a viable CMS for a site I am coordinating.

I had a question about this tutorial: What i basically want to do is combine this tutorial with the CSS Web gallery example you have created most recently. I want to be able to apply border treatments to images that range in size, which would give me the ability to apply the border to an image of any size and not have to do it in photoshop. Was wondering if this was possible. I am thinking that you do the CSS sprites technique talked about in this tutorial, but lay the border over top of the image, using transparent PNGs. If you could email me with some suggestions or any resources that would be great.

Thanks for a great site

N.P (Joker101_np(at)yahoo.com

Browser compatible Code/CSS
Jun 6, 2008 at 12:33 pm

Kindly check it on IE 6.0, there is some bug with expandable box.

Community Site
Jun 28, 2008 at 9:37 am

Nice trick, expandable boxes are widely using all over the web.

Owin Thomas
Jul 27, 2008 at 2:44 pm

This has been tested in Firefox, Safari, Opera, and IE 6 and is working in all of them, so I’m fairly satisfed it’s a solid technique.

I’m using Safari 3.1.2 running on OS X v10.4.11 and the box is gaining an extra left side and bottom edges after using Cmd + until the text has expanded to its limit.

Great site by the way, I’m learning a lot from your tutorials, thanks for the work you’ve put in so far.

Cheers
Owin (U.K.)

Zeytin
Aug 30, 2008 at 11:31 am

Good job and greate site . Thanks

feha
Sep 6, 2008 at 11:41 am

This does not work on IE6

eric
Sep 10, 2008 at 8:14 pm

Doesn’t work in IE 7 or IE 6.

Antonio
Sep 17, 2008 at 8:20 am

The box is ok under Firefox2 and MSIE6 but the image border is white instead of be transparent, any idea?

Dave
Sep 19, 2008 at 11:38 am

Great article, though you spelt ‘its’ wrong in the first paragraph…

Pbirdblog
Oct 17, 2008 at 7:35 pm

Thank you for your code but Doesn’t work in IE 7. Now i am try to correct that.

Teknoloji Platformu
Oct 27, 2008 at 9:30 pm

Thank’s that’s sound great.

mental
Nov 15, 2008 at 10:19 pm

It does not work well in IE7

Busby
Nov 25, 2008 at 12:02 am

Great! I will reserve this one!

decapper
Dec 20, 2008 at 4:39 am

Another great feature I will add to our site http://www.pricelessweddings.com.au

Paula
Dec 20, 2008 at 2:34 pm

I was wondering if any of you designers/front-end coders have a good example of a project timeline or a good estimate of how long the front-end code takes to build. The site is probably going to contain 3-4 different sub-page layouts and maybe 100 to 200 total pages. I use table-less (X)HTML and good current CSS. I just started a new job with full responsibility for redesigning and rebuilding the entire web site. I’m bad just at figuring out how long it takes to drive to work or get a cup of coffee, much less how many minutes per page I’ll spend!

henry
Jan 10, 2009 at 7:50 am

I got it working -http://www.flawlessfinish.com.au

sanat
Jan 22, 2009 at 11:25 am

thanks

nic
Mar 4, 2009 at 6:13 pm

antonio
try defining it in the style sheet

img { border:none }

:]

guest
Apr 18, 2009 at 4:21 pm

Would you(or someone) please fix this in IE7?

pretty-cool
Apr 20, 2009 at 5:20 am

Has any one an idea how to fix it in ie6 and ie7?

Steve
Apr 23, 2009 at 2:34 pm

fix for IE is to give div.bottomright style 0px on top margin….however the great expanding box cannot handle this
expandabilityexpandabilityexpandabilityexpandabilityexpandabilityexpandabilityexpandability

David Dell'Agostino
Jun 5, 2009 at 2:56 pm

it breaks if you increase the view too much

Dave Fowler
Jul 6, 2009 at 5:37 pm

Thanks I’ll use that in my site. Already written a cool window close thing, gonna have to make it resize that as well. http://www.wecomparemobiles.co.uk

Birch
Aug 3, 2009 at 5:47 am

I increased the font size with FF, and it breaks. I edited the page with Firebug also, and put more text. It breaks again.

Bradford Sherrill
Aug 4, 2009 at 10:07 am

Great post! I will use this soon

hasfa
Aug 31, 2009 at 10:01 am

Thanks a lot Guys. U are doing the great job. This is what I looking before.
Really useful, nice and cool ever. Nice tutorial sure easy to understand. I must show all this to my group. Keep in touch.

Goboi
Aug 31, 2009 at 1:07 pm

Seriously, who gives a flip it “breaks semantics.” In a perfect world maybe. And plenty of professionals use negative margins.

Not saying if it does or doesn’t, but I only care if it works, and works cross-browser.

Jako
Sep 4, 2009 at 9:27 pm

NIce and flexi box.

bagsin
Sep 10, 2009 at 7:40 pm

Would you(or someone) please fix this in IE7? thanks

Abi
Sep 13, 2009 at 5:46 pm

Nice example. For those having problems in IE7, add a margin-top:0; (or your favorite shorthand equivalent) to .box div .bottomright.

Also suggest using strict doctype (mine appears off page to the left with transitional). To use strict, replace the doctype with: DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
and add this to the head section: meta http-equiv="Content-Type" content="text/html;charset=utf-8" .

David Dell'Agostino
Sep 20, 2009 at 7:08 pm

it no longer breaks if you increase the width too much

Cyrus
Sep 21, 2009 at 9:52 am

Great , CSS: The All-Expandable Box
Great article. CSS saved web design
Cyrus
Visit http://www.psdtoxhtmlcoder.com

Roberto
May 20, 2012 at 12:50 pm

I got it working on this application (www.qooshi.com) as well

G-ray
Oct 9, 2009 at 12:59 pm

This is probably the best way to do the rounded corners with divs and css. Unfortunately, it is not infinitely expandable, and will break down the larger it gets. The larger you need the box, the more image data needs to be sent. The best infinite rounded box that will work in ie7 is this:
.lcrt div,.rcrt div,.lcrb div,.rcrb div{ width:15px; height:20; background-image: url(images/box.png); background-repeat:no-repeat;}
.lcrt div{ background-position:0 0;}
.rcrt div{ background-position:100% 0;}
.lcrb div{ background-position:0 100%;}
.rcrb div{ background-position:100% 100%;}

 

 

 

 

Mike
Oct 31, 2009 at 4:29 am

NIce and flexi box. Thanks

kinza
Nov 30, 2009 at 10:23 pm

hey
this is great post you have save my time keep it up thanks for sharing.

kinza

vincentdresses
Jan 5, 2010 at 11:32 pm

The designs showed here show what simple and tasteful design is all about. Another one to consider

w
Jan 12, 2010 at 9:52 pm

Very nice box! Except for the nasty blurred edges. ick….

Waqas
Jan 15, 2010 at 7:56 am

Kindly check it on IE 6.0, there is some bug with expandable box.

anyway Nice trick!

Vertex Web Solutions
Feb 3, 2010 at 7:03 am

Great , CSS Thanks for Shear

Faraz
Feb 12, 2010 at 12:30 am

Nice CSS!

Tzon Tikis
Feb 16, 2010 at 3:55 am

It doesn’t work on IE6

Oliver
Feb 17, 2010 at 6:43 am

nice trick. I don’t think it matters about lack of IE6 support, considering recent revelations of IE6 being a security issue. The more we continue to support this old browser the longer it will take to disappear for good.

jams
Feb 23, 2010 at 10:55 am

Nice Tutor….

Dave
Feb 24, 2010 at 4:51 pm

Great, but why does the background box on THIS page stops halfway through the text and never gets close to the bottom of the page? Oh, and the comments don’t seem to fit in the comments boxes if over 2 lines. Viewed with IE8 btw. Nice to find free css tuts though. Thanks

Sebastian Hill
Mar 30, 2010 at 3:35 pm

Hey Chris,
this is very useful piece of work. Top!
I certainly intend to start applying the expandable box. But what I am even more impressed with is the actual design of your example box. I am new at the webdesigner thing and even more so at Photoshop, but I have been trying to design exactly such a box in Ps. I’m afraid I am not up to it yet. Is there any chance your could explain how it is done, or share the .psd even? I’d like to play around with it, change some background/foreground colors etc. (or is there a way to do that in CSS?).
There you have it: you give them a superb tutorial, and all they ask for is MORE!!! :-)
Thanks, mate!

Tobbe
Apr 22, 2010 at 4:55 am

Hmm i tried this but i dont really get where to put the bottom text the “style” anyone knows where and could maybe show a example, cause im really new at this

packetpirate
Apr 28, 2010 at 1:24 pm

Tobbe, it’s CSS. You’re not going to be able to make rounded corners with raw HTML…

Web Design
Apr 28, 2010 at 8:37 pm

chris yoour awesome bro thanks for sharing!

gheuntak
May 12, 2010 at 7:35 am

I tried using this with fixed width but not succeeded… any clues?

Sim
May 20, 2010 at 7:34 am

Any ideas how you can make it work without the DOCTYPE and HTML NS tags (tested it and its breaking in IE 8)?

Ishana
May 27, 2010 at 9:05 am

If the box comes to be higher than 700px, you’ll have a problem. If your design uses a png with transparency and a fancy border, the image will be very big for some low bandwidth. Any ideas of another method that would overcome these situations?

hasfa
Jun 9, 2010 at 12:37 pm

Thanks chris. Nice and good tutorial. another one of the best rounded css box
Let me try..

Gary
Aug 9, 2010 at 10:52 am

Hey guys can anyone help? I have added this to my site and it’s working perfectly except it seems for some reason that the width is limited? I am using it within wordpress and using a box like this to hold the checkout. But the checkout is going over the right hand side of the box?

Thanks in advance!

Gary

external sliding doors
Sep 6, 2010 at 2:02 am

Wow………………….!

Marilu Lubawy
Sep 18, 2010 at 1:37 pm

love your website

اليوتيوب
Sep 19, 2010 at 6:53 am

done with this very fast and very easy thanks for such tut

serge
Sep 22, 2010 at 5:05 am

great stuff…it would be nice if it also work for patterned/image backgrounds, as some very ugly part of the images appear when the default plain white background is deleted.

Don Guzman
Oct 24, 2010 at 5:14 pm

You guys that do these free tutorials are studs! Man I wish I had the time to go through just 1/100,000th of them out there. I am currently in college (at 48 and I grad. in 2012 w/BAS in web dev) and the professor linked us here to check out different CSS methods. I’m a noob, but in time I hope to catch up to you guru’s and then maybe I will contribute. For now I just want to say thank you.

Don G

anish chapagain
Nov 29, 2010 at 12:25 pm

nice to learn!! thanks

outlet uggs
Dec 15, 2010 at 3:40 am

I am using it within wordpress and using a box like this to hold the checkout

Juno Mindoes
Dec 23, 2010 at 11:16 pm

In the third part of the test I’m shooting an object from a pretty close distance (15 cm). Here you can really see a big difference between the different cameras and if you compare the 3G with the white iPhone 4 side by side you can see that they are miles apart.

Henry Peise
Dec 24, 2010 at 9:59 pm

Apple’s launch of the iPhone 4 white has seen the greatest excitement for a new phone ever, with HD video recording, a super high-res screen and ridiculously slim dimensions, it’s not hard to see why its so popular in the world.

Melvins
Jan 4, 2011 at 1:57 am

I am learning CSS in depth and this is what that can help me a lot. Your this tutorial about expanding box is really appreciated and helpful.

Los Angeles Web Design

Ben
Jan 12, 2011 at 4:48 am

Oh, that’s what i’m looking for!

Uçak Bileti
Jan 12, 2011 at 5:22 am

kölemi lazım kardeş

altın çilek
Feb 2, 2011 at 6:12 am

That’s Great! Thanks for the post!

hcg damla
Feb 2, 2011 at 1:33 pm

You guys that do these free tutorials are studs! Man I wish I had the time to go through just 1/100,000th of them out there. I am currently in college (at 48 and I grad. in 2012 w/BAS in web dev) Hcg Damla and the professor linked us here to check out different CSS methods. I’m a noob, but in time I hope to catch up to you guru’s and then maybe I will contribute. For now I just want to say thank you

شات صوتي
Feb 8, 2011 at 6:07 am

thnks
goooooooooooooood
min:(
teem

Derek
Feb 12, 2011 at 4:38 pm

I’ve been studying CSS and web design lately and must say: this entire page is a work of art! So many aesthetically pleasing great ideas, and still perfectly readable without styling. Understanding its components would be worth a couple semesters in college!

mike d
Feb 16, 2011 at 6:41 pm

It has breakage in i.e. 6 and 7 and does not grow with text size growth. boo.

How To Put On A Condom | How To Get Taller
Mar 17, 2011 at 5:29 pm

So true. Thanks for this wonderful article!

How To Get Taller | How To Put On A Condom
Mar 17, 2011 at 5:29 pm

Your explanation of making an All-Expandable box is quite easy to follow. Thanks.

Joe
Jun 23, 2011 at 12:21 pm

Im not sure if this is really going to help, cos it cannot expand even vertically

bluesoft
Aug 3, 2011 at 2:17 am

Text box nice css very professional.

PhotoshopWarrior
Oct 5, 2011 at 11:06 am

Very professional CSS techniques, Tnx

Asigurari Locuinte
Oct 9, 2011 at 3:49 am

Very professional CSS techniques….

yavuz
Nov 29, 2011 at 8:40 am

thank for this css web site

Caravan Man
Dec 13, 2011 at 7:24 am

Interestingly WAI accessibility guidelines say that for an increase in font size above 200% expansion in both dimensions is necessary. Emastic is an excellent CSS grid that allows the use of em or % measures for width which means that the whole latout grows with the text. I hope it is OK to post a link to this here: http://code.google.com/p/emastic/

Sven
Feb 17, 2012 at 6:33 am

Thx man! But the use of the div selector in the CSS is not nessasary. I know.. I’m a bit of a perfectionist.. :P

yemek tarifleri
May 2, 2012 at 12:11 pm

Painting on the tablet is fun, but to do cool things need work.

tim
Jun 15, 2012 at 9:14 am

Is there a way to move the box away from center? Like to the right for instance? I havent had much luck…

Facebook
Aug 1, 2012 at 2:47 pm

Very professional CSS techniques ^_^

Yates de lujo en Ibiza
Aug 1, 2012 at 3:15 pm

Interestingly WAI accessibility guidelines say that for an increase in font size above 200% expansion in both dimensions is necessary. Emastic is an excellent CSS grid that allows the use of em or % measures for width which means that the whole latout grows with the text.

nate
Jan 27, 2013 at 9:16 pm

I find this method to be very inconsistent across all browser, but nice explanation and write up.

DymoLabels
Jun 1, 2013 at 9:56 am

hi
i really like this code
i needed it badly
thanks for sharing
keep it up

Post Comment or Questions

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.