main div doesnt stretch (height) with my floating div

[zyph]

Hi,

I'm having a small problem. In my #main div, i have a little 'Quick info' box, that floats to the right.

Its logical enough, that my #main doesnt stretch down in height, along with my quickinfo box, but I want it to? How can that be solved.

IE shows it allright (of course it's wrong rendered by IE, but right.. yerh..)

#main {
background-color: #F9F5EB;
border-left: 5px solid #DDD7B6;
border-right: 5px solid #DDD7B6;
margin: 0;
margin-left: auto;
margin-right: auto;
padding: 5px;
text-align: left;
width: 720px;
}
.rightbox {
background-color: #EFE9DA;
border: 1px solid #D1C9B6;
float: right;
margin-right: 10px;
width: 200px;
padding: 3px;
}

Cheers,
oSKAr

[edited by: SuzyUK at 11:51 am (utc) on Aug. 3, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]

[Span]

Sounds like you need clearing.
That will make the main div encompass the float.

br.clear {
clear:both
}

<div>

<div>This is a float</div><br class="clear" />

</div>

Here's more about floats: css.maxdesign.com.au/floatutorial/

[zyph]

Okay,

So thats great, thank you =)

BUT! If I add some content before the box, it wont float up to the right?

You can see the problem here: <snipped>

[edited by: SuzyUK at 8:09 pm (utc) on Aug. 3, 2004]
[edit reason] ooops sorry no URLS see TOS #13 [webmasterworld.com] [/edit]

[createErrorMsg]

it wont float up to the right

This is a common misconception, but float doesn't cause things to move up. Things float to the left or right, but vertically their position is determined by their location in the source code.
It sounds like you might have your source code ordered wrong. Make sure the floated <div> comes FIRST in the code, followed by the <div> it floats next to. Otherwise, the float will appear underneath the other stuff, as opposed to next to it.

[edited by: SuzyUK at 8:17 pm (utc) on Aug. 3, 2004]

[zyph]

Okay, I see then. Well, that fixed it, but i wanted the floatbox to be at the bottom in my source code, but allright then ;)

thanks for the help ;)

[edited by: SuzyUK at 8:17 pm (utc) on Aug. 3, 2004]

[createErrorMsg]

i wanted the floatbox to be at the bottom in my source code

If you use margins to clear the Quick box a space on the right side of the #main <div>, you could absolutely position it inside the #main <div>.

If you do, make sure to put position: relative on the #main, then give the 'float' a position:absolute, a top: 0; and right: 0.