ansaurus

Question

Answer 1

+4 A:

Use a combination of display: block; float:left; and your desired width and height.

span {
    display: block;
    float: left;
    height: 100px;
    width: 100px;
}

Andy E 2010-03-09 15:26:56

Floats just do too many weird things for me. :-)

T.J. Crowder 2010-03-09 15:33:29

@T.J. yeah I can relate to that, I wasn't aware inline-block worked on IE6, though ;-)

Andy E 2010-03-09 15:47:05

@Andy: Just *barely* ;-)

T.J. Crowder 2010-03-09 15:58:07

Answer 2

+3 A:

inline-block spans should do it:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Inline Block Demo Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#container span {
    display: inline-block;
    width:  5em;
    border: 1px solid black;
}
</style>
</head>
<body>
<div id='container'>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
<span>Mary had a little lamb</span>
</div>
</body>
</html>

T.J. Crowder 2010-03-09 15:27:59

it should be noted that `inline-block` doesn't work in IE6 :-)

Andy E 2010-03-09 15:29:24

@Andy E: Actually, it does -- but IE6 will only let you set `inline-block` on elements that normally default to `inline`, not on elements that normally default to `block`. I'd remembered that backward for the example, so I've fixed that now. :-)

T.J. Crowder 2010-03-09 15:32:29

@T.J. Good one! :-)

Andy E 2010-03-09 15:39:14

@Andy: Thanks -- and thanks for reminding me about the IE6 weirdness!

T.J. Crowder 2010-03-09 15:43:38

ansaurus

tags:

views:

answers:

Multiline span-behaving elements

related questions