[SOLVED] Paragraphs next to each, not on a new line

[alex3]

At the top of my site I have a nav bar with links. These are just <a></a> tags all next to each other with some style defined in a CSS file (a bit of a margin to separate them horizontally a bit more). In the footer, I want a similar style of text, but they aren't hyperlinks.

 

What I need to know is what tag to use. The <p> tag will create a new line if I create another paragraph, but I want these separate bits of text of spaced horizontally (i.e. I want them all on one line). How do I go about this with out one big <p> with loads of spaces in it?

[Maq]

So you want something like:

 

blah blah blah    blah blah blah    blah blah blah

blah blah blah    blah blah blah    blah blah blah

blah blah blah    blah blah blah    blah blah blah

 

Why can't you just create a table with each paragraph being in a separate column while in the same row?

[alex3]

I would rather not have tables in my layout, trying to have it as clean as possible. But if that's the only option..

[FaT3oYCG]

you can have divs that contain spans

 

i.e.

 

<div>
    <span></span>
    <span></span>
    <span></span>
</div>

 

style the spans inside of the div seperatley and put the paragraphs inside of them

[alex3]

How is it I use CSS to style spans within a div? I remember doing it a long time ago, can't remember now. So that if I have <div id="something">, every span under something has a specific class, so I don't have to add class="someclass" to every span tag. It's something like #something.span, but I'm not sure.

[Axeia]

just a space.

#something space

 

Sounds to me it's a list though, making <ul><li></li></ul> a better choice than <div><span></span></div> ?

[alex3]

Several <li></li> will form new lines won't they?

 

I used a span and it does work, however. Any better solutions, if there are any, would still be great.

[Axeia]

you can get rid of the new line behaviour in more than one way, like floating the li's, or setting the display property to inline instead of list.

 

Question is, if you disable the style would the information make more sense as a list or as a bunch of space separated text, making it a sentence.

[Yesideez]

I'd set a DIV wrapper to the width I want then an inside wrapper to float left and set to half the width of the wrapper. That way you can write out as many secondary DIVs as you want and everything will line up nicely.

div#main_wrapper {
  width: 600px;
}
div#inside {
  width: 300px;
  float: left;
}

 

Now the HTML...

<div id="main_wrapper">
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
  <div id="inside">stuff here</div>
</div>

 

That will result in:

stuff here                               stuff here
stuff here                               stuff here
stuff here                               stuff here
stuff here                               stuff here

[alex3]

This is for a footer, so each piece of text is small, such as a copyright declaration, maybe a site map link, and a few other pieces of text. I'd have to make quite a few divs of different sizes there wouldn't I?

[alex3]

Ahh got it. Axeia's solution works quite well. I was having problems before I realised Safari was applying it's own style to the ul, so I had to declare no margins for it and no padding-left. Thanks very much for the help!