On Jan 10, 2006, at 6:02 PM, Daniel Liljeberg wrote:
> I have a string of words like this.
>
> Foo1 Foo2 Foo3 Foo4
>
> How do I do to place them evenly within a div?
>
> I tried to do something like this and thought that MIGHT place the
> spans
> like I wanted them to.
>
> <div style="text-align: justify"><span>Foo1</span><span>Foo2</span>.
>
> But as you can guess. No go :P
>
> So, any ideas?
Daniel,
I'd mark up these words as a list and float the list items. Here's
what it would look like:
HTML:
<ul class="even-words">
<li>Foo1</li>
<li>Foo2</li>
<li>Foo3</li>
<li>Foo4</li>
</ul>
CSS:
ul.even-words {
margin: 0;
padding: 0;
list-style: none;
}
ul.even-words li {
margin: 0;
padding: 0;
float: left;
width: 25%;
}
Be aware of a couple of issues with this method.
First, you might run in to rounding problems with IE, so it'll
probably a good idea to decrease the width to something more like 24.9%.
Second, since you're floating the list, you'll need to clear the
floats to preserve your layout. If it makes sense to clear the
element directly after this list, do that (you might also want to
float the ul in this case, if you need it to be tall enough to
contain the floats; i.e. if it's background is important).
Otherwise, you might want to auto-clear the ul. You can do it with
this code:
.even-words:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html .even-words {
height: 1%;
}
This will make the <ul> act as a normal block-level element; no need
to worry about its floating contents.
Hope that helps!
--
Matthew Levine (http://www.infocraft.com/)
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
