I have a particular div with an image that is causing a line break, and I want an element to float to the right of it, but currently its way low because of the line break.

I have tried all of this, I even put display inline on all elements and there is still a line break, why is this?

logo {
display: inline;
width: 154px;
float: left;
margin: 0;
padding: 0;
}

display: inline does NOT change a block element into an inline one, it simply sets how it displays.

If you do not want block behaviour, use an inline element.

float to the right

display: is NOT the same as float: if you want a float plane, then use a float:

http://www.w3.org/TR/CSS2/visuren.html#display-prop

http://www.w3.org/TR/CSS2/visuren.html#floats

Thanks, but I am overriding an existing template and have no control to change a Div to a Span.

Its very odd, basically there is no line break or problem until I put the logo image into the existing Div - then it causes a line break which pushes my Shopping Cart onto the next line - when it should float to the right. I have Floats on both elements.

"display: inline does NOT change a block element into an inline one, it simply sets how it displays." - I do not understand this because W3 says Display Inline will stop a line break before or after?

Here is an example of what happens when a logo is added to the empty div;

and does the "empty" div have a set width?

As far as I can tell not originally; but while trying to troubleshoot I added width: 154px; - but it didn't make a difference.

See there are several empty divs in the header and I even tried making a general value for them setting all width, height, margin and padding to zero and even inline just to be safe but it didn't make a difference.

See there are several empty divs in the header

Actually we can't, so have to rely on you being absolutely precise about the problem.

And are both your current question about the same issue?

No, each post involves a different way of fixing this with different code involved. If you need to delete the other post that is fine that is the dirty way and I had different css involved. I want to do this the clean way without absolute positioning; however, we can fix this problem with either solution, so there are 2 ways of going about it. With the other post I can just place the cart absolute and then assign a height to the header to remove the line break space and were done.. if only that worked in IE...

I should clarify that the empty div I put the image into is empty so I am not really sure where it "is" before the image is added. As far as order it is above the Cart div.

Here is more precise CSS for this; there are 10 header divs in order 1 is first, 2 is below that, etc. which seem empty and have no values per say - but I can't say that for sure due to original template stylesheets.

Div 1 (Icon to left of logo - is floated left I think - I have no values for this - its based on original template css) {
}
Div 2 (Nav Menu - appears top right) {
display: inline;
float: right;
margin: 20px 0 0 0;
padding: 0;
height: 22px;
}
Div 3 (Logo - appears left) {
display: inline;
width: 154px;
float: left;
margin: 0;
padding: 0;
}
Div 7 (Cart - appears right - there is probably an original css template value floating it right...) {
display: inline;
z-index:-1;
margin-top: 0;
padding-top: 0;
}

You can almost ignore the display inline as it doesn't do anything in Safari and just messes it up in IE; in IE the cart now floats at the top of the screen to the left of the Nav Menu due to that inline value.

I have revised the header example drawing - please refresh to see a more exact outline.

Im wondering if this is a div arrangement issue; should I switch the contents of Div 2 and Div 3?

The HTML code has them in order like:
div 1
div 2
div 3
etc.

I feel like I have overcomplicated this; I know Div 3 is the problem. Div 3 is causing a line break after it - THAT IS THE PROBLEM.

I have tried Float, Inline, Width. What is it going to take to stop the line break?

What is it going to take to stop the line break

That depends!

Floats.
relative positioning plus a negative bottom margin.

But it is impossible to debug a picture.

Have you tried display: inline-block for that div?
Or better yet use spans, those are inline elements.
Floats are another way of doing it too.