Need Help With Floats!

[boko]

I'm trying to add a floating DIV [ this ] into the middle of a document [ this ] that already is full of floats and clears. It doesn't display properly, and wrecks the page. Here's my CSS document. Anyone know what I can do to fix this? The DIV is supposed to float to the right of the first paragragh but under the h1.

Thanks in advance.
- boko

[_Aerospace_Eng_]

Well it should come before that paragraph and just after the header and just make it float:right; the paragraph should wrap around it.

[boko]

That's the thing. It totally warps the layout. This is what it looks like. It happens in both IE and Firefox.

[_Aerospace_Eng_]

Try this for your CSS

/* Welcome to the CSS Document of the Harry Potter Encyclopedia. */

/*-----------------------------------------------------------------------------------------------*/
/*Main Styles*/
body {
margin:0px;
padding-left:10px;
background-color:#000000;
font-family:arial,helvetica,sans-serif;
color:#000000;
font-size:14px;
}

DIV {
}

SPAN {
}

P {
font-size:14px;
}

iframe {
display:none;
}


/*-----------------------------------------------------------------------------------------------*/
/*Header Styles*/

h1,h2,h3,h4,h5,h6,h7 {
font-weight:bold;
}

h1 {
font-size:28px;
text-align:left;
}

h2 {
font-size:26px;
text-align:left;
}

h3 {
font-size:24px;
text-align:left;
}

h4 {
font-size:22px;
text-align:left;
}

h5 {
font-size:20px;
text-align:left;
margin-bottom:0px;
}

h6 {
font-size:18px;
text-align:left;
margin-bottom:10px;
margin-top:10px;
}

h7 {
font-size:16px;
text-align:left;
}


/*-----------------------------------------------------------------------------------------------*/
/* Link Styles */

a:link {
color:#800000;
text-decoration:underline;
}

a:visited {
color:#800000;
text-decoration:underline;
}

a:active {
color:#800000;
text-decoration:none;
}

a:hover {
color:#000000;
text-decoration:underline;
}

a:visited:hover {
color:#000000;
text-decoration:underline;
}

/*-----------------------------------------------------------------------------------------------*/
/* Basic Styles */

.floatleft {
float:left;
}

.floatright {
float:right;
}

.clear {
clear:both;
}

/*-----------------------------------------------------------------------------------------------*/
/* Page-Specific Styles */

/* -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Home Page */

.mainheader {
text-align:center;
}

.rightmenu {
font-size:12px;
border: 1px black solid;
background-color:#CCCCCC;
width:150px;
float:left;
}

.rightmenu .title {
font-weight:bold;
color:white;
border-top: 1px black solid;
border-bottom: 1px black solid;
background-color:#000066;
padding-left:1px;
padding-right:1px;
}

.rightmenu .searchtitle {
font-weight:bold;
color:white;
border-bottom: 1px black solid;
background-color:#000066;
padding-left:1px;
padding-right:1px;
}

.rightmenu p {
margin:1px;
}

#updates p {
margin-top:2px;
margin-bottom:2px;
}

.updatetitle {
font-weight:bold;
text-align:left;
border-bottom:1px solid black;
margin-bottom:2px;
padding-bottom:1px;
}

.updateinfo {
text-align:right;
font-style:italic;
}

/* -- -- -- -- -- -- -- -- -- -- -- -- -- */
/* Book Pages */

.lgbookcover {
border:2px black solid;
float:right;
}

/*-----------------------------------------------------------------------------------------------*/
/* Content Formatting */

#header {
margin:0px;
padding:0px;
}

#castle_btm {
margin-bottom:5px;
float:left;
}

#interior {
margin-left:166px;
padding:10px;
background-color:#FFFFFF;
}

#main {
padding:5px;
padding-top:0px;
margin-bottom:7px;
margin-top:0px;
}
#main p {
margin:0;
}
#copy {
background-color:#FFFFFF;
text-align:center;
padding:1px;
}

#copy P {
font-size:12px;
}


/*-----------------------------------------------------------------------------------------------*/
/* Navigation Styles */

#menu {
background-color:#000033;
width:150px;
font-size:11px;
clear:left;
float:left;
margin-bottom:10px;
}

#menu a:link {
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}

#menu a:visited {
font-size:11px;
color:#FFFFFF;
text-decoration:none;
}

#menu a:active {
font-size:11px;
color:#99ccff;
text-decoration:none;
}

#menu a:hover {
font-size:11px;
color:#99ccff;
text-decoration:none;
}

#menu a:visited:hover {
font-size:11px;
color:#99ccff;
text-decoration:none;
}

#menu ul {
margin-left:0px;
padding-left:0px;
margin-bottom:0px;
list-style:none;
}

#menu li {
border-bottom:1px solid black;
padding-left:2px;
color:#FF9900;
}

[boko]

Didn't work... What did you change? Just wondering.

[_Aerospace_Eng_]

It worked for me in FF. I made took out the position:absolute set a left margin to it set its background to white.

[boko]

It's about 10 pixels too far to the right for me.