Do not set a width of Set up

Ricechen — Wed, 26 May 2010 08:43:14 +0000

Do not set a width of
Set up padding Automatically adapt width,float left or right

For those of you that haven't

businessentials — Wed, 26 May 2010 01:24:54 +0000

For those of you that haven't seen it, you can make boxes that look like the following (or better/worse) with this technique. The neat thing is that they expand and shrink automatically to fit your content and the XHTML markup is really light:
Sample Simple Rounded Corner CSS box

So let's just start right in... Imagine, if you will, the following markup:
http://modxcms.com/about/team/rthrash/simple-rounded-corner-css-boxes.html

It didn't work for me but

fifeclub — Wed, 19 May 2010 20:45:12 +0000

It didn't work for me but thank you for the tips. I solved it by cheating, by crudely tucking the buttons inside another div that is centered and barely bigger than the two boxes (+padding).

<div style="display: block; width: 440px; margin: 0 auto 0 auto;">
	<a class="button" href="/residential_reverse_osmosis.php" style="width: 200px">Text in Box 1</a>
	<a class="button" href="/commercial_water_filtration.php" style="width: 200px">Text in Box 2</a>
</div>

Possibly your problem stems

webwiz — Wed, 19 May 2010 16:27:33 +0000

Possibly your problem stems from the fact that <a> elements are inline, and don't act like boxes. As you discovered, adding "float" displays them as blocks. Adding "display: block;" also works, but does not take them "out of the flow."

Using "display: inline-block;" works for real browsers, and will likely do as you want in IE as well. IE older than version 8 does not really understand that, but instead applies "hasLayout" which has some of the same properties.

A read of this should set you straight: CSS Layout and Formatting (Sitepoint CSS Reference).