CSS floating issue being pushed to new line

Question

Please see my jsfiddle example below.

Can anyone figure out what I am doing wrong here?

I am attempting to use a third party plugin called Smart Wizard it all works except for this one aspect as shown in the jsfiddle.

The [X] is on a new line, it should be directly to the right of the error message.

http://jsfiddle.net/jamesjw007/4wJv4/1/

Answer 1

just add

.content { width: 90%; float: left; }

example fiddle: http://jsfiddle.net/4wJv4/9/ - Adjust the width of content element as you prefer

Answer 2

Try adding this to the Stylesheet.. It worked..

.swMain .msgBox .close {
    float: left;
}

You have to float all the elements to the Left in the same tag to get the elements to be in One line.

Just the "float" will do..

Answer 3

You need to float the content div as well as the close icon. In addition to this, you might want to float the close button to the right of the message box as opposed to immediately after the text.

.swMain .msgBox .content { float:left; width:auto; }
.swMain .msgBox .close { float: right; }

I've updated your fiddle with these changes - http://jsfiddle.net/4wJv4/19/