Solved

Div with in a Div and word wrap

Posted on 2014-02-18
6
214 Views
Last Modified: 2014-02-18
here is a Pic what i want
The main box's is a div then the text in it but i want to add other div in that one with the text word wrap around it.

How do i do that ?
0
Comment
Question by:armasmike
6 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 250 total points
ID: 39867751
<style>
.inner{float:right;margin-left:10px;}

</style>

<div class="outer">
     <div class="inner">
     </div>
</div>

Open in new window

0
 
LVL 9

Accepted Solution

by:
WebDevEM earned 250 total points
ID: 39867752
Hi,

I've created a Fiddle (http://jsfiddle.net/webdevem/QLYAL/) to demonstrate it, but here's the code:
<div id="outerOne">
    <div id="innerOne"><div id="littleGuy">
            This is a test
        </div>
        Test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
        
    </div>
</div>

Open in new window

and the CSS:
div {
    padding: 5px;
}
#outerOne {
    border: 2px solid #cacaca;
}
#innerOne {
    border: 2px solid #000;
    border-radius: 5px;
}
#littleGuy {
    width: 200px;
    float: right;
    border: 2px solid #000;
}

Open in new window

0
 

Author Closing Comment

by:armasmike
ID: 39867753
thank you
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39867754
Hi armasmike,

You can achieve this with the CSS property float. You can take a look at the example I set up for you: http://jsfiddle.net/MZeDE/

I have the inner div floated to the right with a margin on the bottom and left to give it more space from text surrounding it.
0
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39867755
SO FAST! :) Never mind.
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39867758
Here is a sample http://jsbin.com/kiyugexe/1/
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

30 Experts available now in Live!

Get 1:1 Help Now