sorry this is such a simple question but I can't figure it out. How to display a div inline with the 1st div of a list of block divs.

here's a jsfiddle so you can see what I mean: http://jsfiddle.net/trpeters1/u6pt6/11/

here's the HTML for that:

<div class="">1</div>
<div class="">2</div>
<div class="">3</div>
<div class="title">this is my title</div>

and here's the CSS:

div{
    width:30px;
    height:30px;
    margin:1px;
    background:red;
}

In this example I'd like the div with class="title" to be displayed inline alongside the number 1 and not at the bottom beneath the number 3 as it currently stands. An important caveat is that the first 3 divs need to stay together because they are rendered by some php code. So non-nesting based solutions are preferred.

thanks for your help,

tim

• css
• html
• inline
• block

Like this?

<section>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</section>
<section>
    <div class="title">this is my title</div>
</section>

​

div{
    width:30px;
        height:30px;
        margin:1px;
        background:red;
}
section{
    float:left;
}
.title {
    width: 150px;
}

Title on the right: http://jsfiddle.net/u6pt6/13/

Title on the left: http://jsfiddle.net/u6pt6/14/