display strings in one line using css

Question

I need to display string "field1 field2 field3 " in one line and field1, field2 and field3 will be a N number of characters.

How can i display the strings?

<style>
#div1{
 width:1000px;
 border:1px solid;
} 
.field1{
 display:inline;
 width:auto;
}
.field2{
 display:inline;
 width:auto;
}
.field3{
 width:auto;
}
 </style>
 <div id="div1">
 <div class="field1">Field1(with N number of characters)</div>
 <div class="field2">Field2(with N number of characters)</div>
 <div class="field3">Field3(with N number of characters)</div>
 </div>

• Sven Bieder: use spans instead of divs for your fields. That solves your problem without any css changes
• Alex K.: Barring field3 which lacks display:inline are they not already on one line?
• Venkata Krishna: You missed display:inline field in .field3 also width:auto for entire div tag

Answer 1

In addition to turning all block-level children (including the last div) to inline layout, you may need to prevent line wrapping. At the simplest, you could replace the style sheet with this:

#div1 {
 white-space: nowrap;
 border: 1px solid;
} 
#div1 div {
 display: inline;
}

You can set width on the element if you have other reasons to do it, but the above code works without such settings, too.

• Roddy of the Frozen Peas: +1. I have no idea all the other answers are trying to make this more complicated than it has to be.

Answer 2

I think this is want you want

<style>
#div1{
width:auto;
border:1px solid;
 } 
.field1{
display:inline;
width:auto;
}
 .field2{
display:inline;
width:auto;
}
.field3{
display:inline;
width:auto;
 }
 </style>
 <div id="div1">
 <div class="field1">Field1(with N number of characters)</div>
 <div class="field2">Field2(with N number of characters)</div>
 <div class="field3">Field3(with N number of characters)</div>
 </div>​

• Roddy of the Frozen Peas: Float and inline? Why both when just one would suffice?

Answer 3

As Sven pointed out, you can use spans. Without any css changes, all of your items will display next to each other.

Your other option would be to float the divs, like this:

 <div id="div1">
 <div class="field1 fl">Field1(with N number of characters)</div>
 <div class="field2 fl">Field2(with N number of characters)</div>
 <div class="field3 fl">Field3(with N number of characters)</div>
 <div class="clear"></div><!-- This makes sure you don't float unintended elements in older browsers -->
 </div>

and add this to your css (also, remove your display: inline; rules):

.fl {
 float: left;
}
.clear {
 clear: both;
}

You would want to use divs if the content of field1, field2, or field3 is dynamic (ex using javascript to replace the text with something else); but if you're sure all you're going to put inside the elements is text, then using spans is fine (example):

 <div id="div1">
 <span class="field1">Field1(with N number of characters)</span>
 <span class="field2">Field2(with N number of characters)</span>
 <span class="field3">Field3(with N number of characters)</span>
 </div>

Answer 4

You shouldn't need separate classes for each item, if they're all going to be aligned in a row, you could just use one class that will do the job (unless you're going to reference the specific class later on). The :after will ensure that nothing coming after the row will appear on the same line.

<style>
 .field {
 display: inline-block;
 }
 .field:after{
 display:block;
 height: 0;
 content: '';
 clear: both;
 }
</style>
<div id="div1">
 <div class="field">Field1(with N number of characters)</div>
 <div class="field">Field2(with N number of characters)</div>
 <div class="field">Field3(with N number of characters)</div>
</div>