Neverside

span the width of the div

I have text that I want the words to span the width of a div. But some of the words have space like About Us and when I try word-spacing it spaces those out too. How can I fix that?
Hope I made it clear enough.

Could you give us an example? Either a site that pulled it off or if there isn't one just Photoshop it or something so we have an idea. I think I know what you're trying to do but I don't wanna give you a dumb answer that's answering the wrong question.

like....
The div width is 400 and the text is:
Home Site Map About Us Contact

I would like the text to span the width (400px) so the spacing is like:
Home_____Site Map_____About Us_____Contact
(ignor the "____")

So that the different links are spaced out like that but not each individual word.
I hope that helps more.

Last edited by paul, May 31st, 2005 04:03 AM (Edited 1 times)

i get what he's saying. i just don't know how i would do that with css. lots of  's?

___________________

There is no theory of evolution. Just a list of creatures Chuck Norris has allowed to live.

use margin-left or right on the links?

___________________

Getox - Web Services | Exero Music Forums!
Go Fuck Your Self

Since it looks like a navigation, put it in an unordered list and each item in a li tag. That way you can set up the space between each li.

___________________

Blog / Lab

What would the spacing for it be?

Anyway, as i said before, u could set a margin for them, Here i did something

Code:

<style>
ul {
padding: 0px;
margin: 0px;
}
li {
display: inline;
list-display-type: none;
float: left;
word-spacing: 5px;
margin-right: 50px;
border: 1px dashed #000000;
padding: 3px;
}
</style>
<ul>
<li>One</li>
<li>Two</li>
<li>Three Three</li>
</ul>

___________________

Getox - Web Services | Exero Music Forums!
&#71;&#111;&#32;&#70;&#117;&#99;&#107;&#32;&#89;&#111;&#117;&#114;&#32;&#83;&#101;&#108;&#102;

Don't use margins, here's what I'd do:

PHP:

<?php

(disregard PHP, I like highligths)

HTML:
----------
<ul>
    <li>
        <a href="#">Link 1</a>
    </li>
    <li>
        <a href="#">Link 2</a>
    </li>
    <li>
        <a href="#">Link 3</a>
    </li>
    <li>
        <a href="#">Link 4</a>
    </li>
</ul>

CSS:
----------
* {
margin: 0;
padding: 0;
}

ul {
/* Have the ul span the width of the div it's contained in */
width: 400px;
}

li {
/* Have each list item take up a fraction of the room (400px / 4links = 100px each) */
width: 100px;
float: left;
display: block;
/* Have the text of each li be centered within it */
text-align: center;
}

a {
}

(disregard PHP, I like highlights)

?>

I'm pretty sure that's what your going for.

___________________

"Sam says : Die!"

Sure is, thanks everyone.

Edit: Ok it works but I have some links that are longer in name then others, so if I set the li to a certin amount of pixels then some of them will be too small and if I set it to the biggest it will overflow to where I don't want it to go.

Last edited by paul, May 31st, 2005 03:02 PM (Edited 1 times)

Just remove the width and define some padding to the left/right side instead and it should be fine.

___________________

Neversidian, your staff is broken.