Div's in one line

Question

Here is my code:

<style type="text/css">
    div.page {
      text-align:center;
      border: 1px solid rgb(0,0,0);
      width:20px;
      height:20px;              
    }

    span.page {
      text-align:center;
      border: 1px solid rgb(0,0,0);
      width:20px;
      height:20px;              
    }
 </style>


<div class="page">1</div>
<div class="page">2</div>
<div class="page">3</div>

<span class="page">1</span>
<span class="page">2</span>
<span class="page">3</span>

Div's look fine but they places vertically. Is there any way to place them horizontally in one line?

Span's place in the one line, but the span can not have the width as any inline element. If there is no way to use DIV's and SPAN's for my task I will use a table, but I am looking for the no-table solution.

Answer 1

Use

display:inline-block

in the div's style

Answer 2

Use this

div.page {
    text-align:center;
    border: 1px solid rgb(0,0,0);
    width:20px;
    height:20px;              
    float: left;
}

Answer 3

use display:inline; and your div's will be in one line.

other solution : float:left;

Answer 4

You can try out with the combination of ul/li with list-style ( css property ) as none.

some thing like

<ul> <li> <div ....</li> <li><div...></li></ul>

or

you can try within table / tds inside divs.

Answer 5

Lorenzo's answer is correct, but I would add something to the markup:

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
    <div class='pageHolder-footer'></div>
</div>

in CSS, add:

div.pageHolder-footer{
    clear: left;
    height: 0;
}

So that the rest of your stuff will flow correctly.

==Alternative method (From Jan, and SitePoint) ==

No need to have the div.pageHolder-footer (but keep pageHolder). And then:

div.pageHolder { overflow: auto; } /* Jans' method */
/* or */
div.pageHolder { overflow: hidden; } /* From SitePoint */

They both may have drawbacks, but it depends on what you need.

Answer 6

xandy is correct, but this is better:

<div class='pageHolder'>
    <div class='page'>1</div>
    <div class='page'>2</div>
    <div class='page'>3</div>
</div>

with CSS:

.page {
  text-align:center;
  border: 1px solid rgb(0,0,0);
  width:20px;
  height:20px;              
  float: left;
}

.pageHolder{
  overflow: auto;
  width: 100%;
}

Elements to clear floats is markup. It's like using <br> but for floats. Mixing markup and content is considered bad practice in semantic web.

Read this article for more information.