CSS Problem Making Simple Box

fifeclub posted this at 15:16 — 19th May 2010.

Joined: Feb 2001

I have no idea why I'm having so much trouble making a simple box. I got it to work but I don't understand why it was happening or why the fix fixed it. Can somebody please explain.

I made two boxes side by side. The code is simply:

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

The CSS that controlled these boxes is:

.button, a:link.button, a:active.button, a:visited.button {
	color: #fff;
	background-color: #2A6BA3;
	width: 200px;
	border: 2px solid #1C2230;
	text-align: center;
	margin: 4px;
	padding: 4px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	font-size: 18px;
	font-family: verdana,helvetica,sans-serif;
}

a:hover.button {
	background-color: #E75E28;
	background-image: none;
	text-decoration: none;
}

But it didn't work at all as I expected. Here's a screen grab. Notice how the 200 pixel width is completely ignored.

So I fiddled and fiddled and found a work around. The boxes seem to work fine when I add a float-left (or right) into the CSS code. Huh? Not that I understood why the 200px box width wasn't working in the first place but now I'm really confused as to how a float designation that I don't want actually fixes the box. The downside is that I don't want it to float left or right, I want these boxes centered. Here's a screengrab of the "fixed" workaroud result. This is how I want the boxes to look, but centered instead.

Can somebody please enlighten me as to both why it didn't work at first, and why the seemingly unrelated float code fixed it? Thanks.

webwiz posted this at 16:27 — 19th May 2010.

He has: 629 posts

Joined: May 2007

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

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

fifeclub posted this at 20:45 — 19th May 2010.

He has: 688 posts

Joined: Feb 2001

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>

businessentials posted this at 01:24 — 26th May 2010.

They have: 29 posts

Joined: Apr 2010

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

Ricechen posted this at 08:43 — 26th May 2010.

They have: 10 posts

Joined: May 2010

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