Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Div with in a Div and word wrap

Posted on 2014-02-18
6
Medium Priority
?
234 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 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1000 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 1000 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 54

Expert Comment

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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

916 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