needs div inside another div

[reibi]

hi everone,
Well I need to display something like below by using css. I am like stuck in this. So, plz anyone help me out.

the first div.the first div.the first div.the first div.
the first div.the first div.the first div.the first div.
the first div.the first div.the first div.the first div.
the second div.the the first div.the first div. the fir
second div.the sec st div . the first div. the first div
ond div the second the first div. the first div. the first
div.the first div.

plz help anyone. thanks in advance:)

http://codepunk.hardwar.org.uk/acss08.htm

http://codepunk.hardwar.org.uk/acssx13.htm

[reibi]

Thanx rajarajan,
But this is not want I was looking for. I will give you the format , it should be something like this.

this is div1.this is div1.this is div1.this is div1.
this is div1.this is div1.this is div1.this is div1.
this is div2.this is div2. this is div1.this is div1.
this is div2.this is div2. this is div1.this is div1.
this is div1.this is div1.this is div1.this is div1.

Plz help. I am really in need. thanx in advance.

[Dandello]

Assuming you're simply nesting div2 inside of div1 and want the contents of div1 to flow around div2: simply nest them but give div2 a style of

margin:4em 0 2em 0; float:left; width:50%;

(top - right - bottom - left) Obviously you will need to adjust the margins to get it into position. The float left should allow the content in div1 to flow around div2.

Hope this helps

[ko ko]

Simply way for one DIV inside another DIV.

<div class="div1">
     <div class="div1-1">
         <div class="div1-2">
         </div>
     </div>
</div>

[Dandello]

okay :style in head or style sheet

.div2 {margin:4em 0 2em 0; float:left; width:50%;}

<div class='div1'>
    <div class='div2'>
    </div>
</div>

[reibi]

hey Dandello, thanx for the help, it works but it doesn't display the result exactly I wanted. It will display the result something like this.

this is div2. this is div1.this is div1.
this is div2. this is div1. this is div1.

but I don't want to display like this. It should be like this.

this is div1.this is div1.this is div1.
this is div2. this is div1.this is div1.
this is div1.this is div1

Isn't there any method to do like that. I have seen people doing like that. So plz Dandello, plz help.

[reibi]

hey anyone plz, I am waiting...

[Dandello]

I just got back home and am researching it. I know it can be done.

[reibi]

hey if it can be done then plz tell me the solution. I am so gratefull to u.

[Lusiphur]

You might find this link to be helpful in what you're looking to do... it goes step by step in how to have a span within your div that imitates the general effect you're talking about (I think). Some adjustment to the method they outline should do what you wanted if I'm reading it right.

Hope this helps :) Please remember to mark solved once your issue has been resolved.

[Dandello]

Okay - it's not perfect but here goes:

<div style='float:right; margin-top:0; text-align:left'>
    <p style='text-align:left'>This is div1. Make sure all '<p>'s are aligned to the left.</p>
    <p>These paragraphs position the next div vertically.</p>
    <div style='float:left; width:50em;>
        <p>Div2</p>
    </div>
    <p>The rest of the text for Div1</p>
</div>
<div style='clear:both'></div>

[reibi]

I am sorry but it's not working. Have you tried this yourself. I copied the above code and run, one closing apostrophe was missing on fourth line.

Hey send another one.

[Dandello]

I edited it on the fly, but yes, aside from a typo, this worked

<div style='float:right; margin-top:0; text-align:left; width:100%'>
<h1 style='margin-top:0px; margin-bottom:2px'>Realms Helps Site Map - Monsters</h1>
<p style='text-align:left'>This is div1. Make sure all '<p>'s are aligned to the left.</p>
<p>These paragraphs position the next div vertically.</p>
<div style='float:left; width:20em;'>
<p> Div2</p>
</div>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
<p> The rest of the text for Div1</p>
</div>
 <div style='clear:both'></div>

[reibi]

hey I tried this it works but when I implemented above code in my page. the div2 moves up left but not at the middle of div1. Actually the text on the div2 is dynamic.Because of that it is causing problem. Then how to sort it out. I just want the div2's text displayed exactly at the center of div1's text and these both are dynamic. I will not write them. They will be fetched from the database so div2's text should be vertically center but horizontally left aligned. You have helped me till now. Hope I will reach to my goal with ure help. Thankyou

[Lusiphur]

reibi;

Did you look at the link I provided for you? I ask because I still believe it will do what you're looking for *shrug*

[Dandello]

I have looked at the various links provided by other people - the links have great ideas and may come close but what you're asking may actually not be possible with divs.

All the tutorials mentioned here require either a div on top of the two floats to push the left div down:
(http://codepunk.hardwar.org.uk/acssx13.htm)

DIVT DIVT DIVT
DIVT DIVT DIVT
Div2 Div2 div1
div1 div1 div1
div1

OR use an image for the text to flow around (http://www.alistapart.com/articles/crosscolumn/) - Unfortunately that image is set in a span that has to be set inside the surrounding text. Obviously the surrounding text cannot be dynamic.

Also unfortunately, fixing the position of the second div, either by setting the top margin to force div2 down or by using the position tag, prevents text in div1 from flowing properly.

Is there a page out there that has successfully done what you're trying to do? If so, could you post a link or send the link to me by PM?