floating div

[pyrodude]

What I'm planning to do is insert a div at the beginning of another div (an AJAX div inside a main content div) and position it relatively.  Here's an example of what I have:

 

<div id='mainContent'><div id='rightDiv'>This is a right-float div<br /><br /><br />blah!</div>
<b>This is a big main content div
<br /><br />
<br />
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />. 
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />.
<br />. 
</div>

and the CSS is:

#rightDiv {
position: relative;
float: right;
top: 100px;
width: 100px;
}

 

What I'd like to do is find a way to have text wrap around the div (therefore not get placed on top of or behind it - i think this excludes using position: absolute)

 

I've been using relative positioning to move the div to the right and down 100px, but it winds up affecting the first few lines (the mainContent div text is centered, and this div scoots the top 3 or 4 lines to the left a little bit.

 

I can't seem to figure it out, can anyone else?

[jcombs_31]

use padding instead of margins. There is also no need to position anything relative or absolute in your css.  Also, if your element is floated right, it should be positioned all the way to the right, so it doesn't make sense that you say you are using margins to move it to the right.

[pyrodude]

In order to create the div at the beginning of the main div and then move it part-way down the page, doesn't it need to be position: relative?  I don't know of any other way (except maybe javascript...and even then I'm not sure!) to move its location.  Please enlighten me!

 

I misspoke in saying I was moving it to the right and down.  What I meant to say was that the float: right was moving the div to the right and the top: 100px was moving it down.  Sorry for the confusion.

 

As for the way it affects the text around it, is there any way around that?  Here's what I'm trying to prevent:

 

The issue seems to revolve around the use of position: relative, as it takes it out of the regular flow of the page.  So, I guess this is more of a positioning issue.  Is there a way to position a div manually via CSS, JavaScript, or some other miracle worker?  Thanks...

[jcombs_31]

The nested div will automatically be contained within its container div by the natural flow of html.

 

I'm not sure where the problem is, but all you have to do is set up the css on two divs and order them correctly in the html:

 

<div id="container">
  <div id="floated"> Something Goes Here </div>
</div>

 

#container {
....
}

#floated {
float: right;
padding: 100px 10px 10px 10px;
}

 

Do whatever you want with the container, but the nested div will be positioned at the top right of the container.  Adding padding will make it so that it is pushed down 100px from the top and 10px all around without the text wrapping around the top.  The text will eventually wrap around the bottom . 

 

Is there something else I'm missing that you are trying to do.