How to place one div next to other, not below

[rain13]

I am trying to place "login" div right of {TITLE}. but with code what I have it goes below that parent div as a separate block. With out float:right login goes below {TITLE}. Is there way to have it right of it?

<div style="text-align: left; width: 100%; background-color: #99ccff"><h1>{TITLE}</h1><div style="float:right; text-align: left; background-color: #FF00ff">login</div></div>

I want it be like this: http://www.w3schools.com/cssref/pr_class_float.asp where that translate and search box are right of w3c logo but still in same div.

[Krewe]

I am trying to place "login" div right of {TITLE}. but with code what I have it goes below that parent div as a separate block. With out float:right login goes below {TITLE}. Is there way to have it right of it?

<div style="text-align: left; width: 100%; background-color: #99ccff"><h1>{TITLE}</h1><div style="float:right; text-align: left; background-color: #FF00ff">login</div></div>

I want it be like this: http://www.w3schools...class_float.asp where that translate and search box are right of w3c logo but still in same div.

You can't have the second div inside the first one.

<div style="float:left; text-align: left; width: 100%; background-color: #99ccff"><h1>{TITLE}</h1></div><div style="float:left; text-align: left; background-color: #FF00ff">login</div>

[dsonesuk]

A floated element will not merge with non-floated elements, but the non-floated will merge with floated so swap round

<div style="text-align: left; width: 100%; background-color: #99ccff"><div style="float:right; text-align: left; background-color: #FF00ff">login</div><h1>{TITLE}</h1></div>

[rain13]

Thank you. Just one extra question. When that pruple div with "login" requires more height than parent div has it goes partially out of parent div. How do I make parent div auto resize for that inner div's height?

Edited September 1, 2012 by SoItBegins

[dsonesuk]

The parent div, cannot detect the area of a floated element, so its height at present is determined by <h1></h1> element, also the h1 also has margin, which the parent element is ignoring also because of issue called collapsing margin, where the margin of child element will seep beyond the edge of parent with no or smaller margin, and looks as though the child margin has been transferred to the parent instead. To fix both issues, apply overflow: hidden to parent, and then apply margin to child div element to position it properly.

[rain13]

thanks again.