Text wrapping rather than floating left and down

[wongadob]

I have a problems where when a line gets too long, even if there is enough room to wrap, the div that contains the text that should wrap just moved below the div on the left hand side of the screen rather than next to it. So first I shall show my CSS and then explain it

#mainbody_note{z-index: 0;position: relative;top: 65px;width: 100%;background-color: #ffffff;border: none;}.notificationitem{clear: both;float: left;width: 100%;background-color: #ffffff;font-size: 12pt;border: solid 1px #ececec;border-bottom:solid 1px #333333;border-radius:0px;margin:0px;padding-top: 2px;padding-bottom: 5px;padding-left: 5px;padding-right: 5px;overflow:auto;position:relative;height:auto !important;}.note_picture{clear: left;float: left;height: 100%;margin-left: 5px;margin-top: 3px;width: 45px;}.notificationmessage {float: left;margin-left: 10px;margin-top: 5px;}

So my main page wrapper for this is #mainbody note - This just really positions the main body of infromation below a 'header' div that contains info. So its an overall wrapper! Within the mainbody. There are a number of noticiation or message boxes. This is defined by another div with the class .notificationitem. Each .notificationitem is split into 2 parts. One for a picture and the other part for a series of data. The two 'div's as supposed to sit side by side with .note_picture on the left and .notificationmessage on the right (starting next to the picture) All works fine until the text in .notificationmessage is longer than the remainder of the screen. This forces the whole .notificationmessage div to be positioned below the .note_picture div. How can I prevent this from happening. it is possible that the .notficationmessage height could be bigger than the picture height. in which case the overall height of .notificationitem should modify, but notficationmessage should always be flush to the right of .note_picture. Any help much appreciated.

[ShadowMage]

I can think of two possible solutions: - Give the .notificationmessage a defined width. If you need it be fluid, this obviously won't be a viable solution. - Float .noticationmessage to the right instead of left and give it overflow: auto;

[wongadob]

Sadly the screen size needs to be flexible so I can't give it a fixed size. Also not sure I could float it right, would that not right justify it too?

[dsonesuk]

Since the .note_picture element is a fixed width and floated, just remove the float from .notificationmessage element and give it a margin-left: of about 60px, problem solved!

[wongadob]

Yup worked a treat, thanks!