My CSS display:inline doesn't display inline ?

Question

I have two elements

<div class='class1' id='item1'>info set1<div>

and

<div class='class1' id='item2'>info set2</div>

my css reads:

.class1{

display:inline;

}

#item1{

float:right

}

#item2{

float:left;

}

but the page I view has the two elements staggered, one above and to the right of the other

What I want for them to be side by side

it was my understanding that "display:inline" would do this but it's not please help me

Answer 1

inline makes them ontop of each other

as in

they are both IN the same LINE

try takin that out

Answer 2

display: inline is used to make block-level elements behave like inline elements (so that they not break the &quot;flow&quot; of certain layout components).

float:left/right is used to make block level elements behave like block level elements that sit beside each other instead of being vertically aligned - using &quot;float&quot; changes an inline-displayed block level element back into a block level element.

So in effect, your float cancels out your display:inline.

Two questions:

1. Do the DIVs contain more info than you showed us here?

2. Why are you adding the floats?

If the answer to #1 is &quot;yes&quot;, display: inline is useless, because it is primarily there to allow short bursts of content in one line (for example, to create a horizontal menu with a UL/OL list)

If the answer to #1 is &quot;no&quot;, then using floats is superfluous.

However, if the answer to #1 is &quot;yes&quot;, simply remove the &quot;display:inline&quot;, make *both* DIVs float *left*, and assign a width to them (without width, browsers assume 100%, so they still float in the space that&#039;s allowed to them: below each other...)

So:

#item1{

float:left;

width:50%;

}

#item2{

float:left;

width: 50%;

}

And don&#039;t forget to place a semi-colon behind each CSS declaration. :-)