Dec 07
CSS: The All-Expandable Box
by: Chris Coyier
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.
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
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.
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.
Best of CSS Design 2007 Typographic Contrast and Flow
Comments
Pages: 8 7 6 5 4 3 2 1 » Show All
There are 71 comments (+Add)
Pages: 8 7 6 5 4 3 2 1 » Show All
Post Your Comments
Loading ...
71 SohbeT http://www.myalem.net
August 19th, 2008 at 1:26 pm
Thanks Good Admin
70 Owin Thomas
July 27th, 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.)
69 Community Site http://www.gigaturn.com/social-networking.htm
June 28th, 2008 at 9:37 am
Nice trick, expandable boxes are widely using all over the web.
68 Browser compatible Code/CSS http://gigaturn.com/best-quality.htm
June 6th, 2008 at 12:33 pm
Kindly check it on IE 6.0, there is some bug with expandable box.
67 NGP
June 6th, 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
66 quongdang
May 29th, 2008 at 1:19 am
hixx hixxx… it’s not work correctly in IE. Why so???
65 Geison
May 24th, 2008 at 7:51 am
Thanks !!
64 miniak http://www.fif.pl
May 10th, 2008 at 7:14 am
I love it! Thanks a lot !.
63 virtualnetia http://www.virtualnetia.com/
April 22nd, 2008 at 5:14 am
Good job and greate site !
62 PawelGIX
April 15th, 2008 at 4:30 pm
Fix for IE7
.box div.bottomright {
margin-top: 0em; /* add this */
}