CSS: The All-Expandable Box - Web Designer Wall

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.

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

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 [email protected]

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

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" .

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.

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

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….

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?

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!

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

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/