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

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.