coiso
coiso

Reputation: 7479

wrap text around a div

How can I make div 2 wrap around div 1 ?

(both divs contain text)

+---++------------------+
|   ||                  |
| 1 ||                  |
|   ||          2       |
+---+|                  |
+----                   |
|                       |
+-----------------------

Upvotes: 0

Views: 110

Answers (3)

sachleen
sachleen

Reputation: 31141

Float div 1: Demo

CSS:

#d1 {
  float: left;
}

HTML:

<div id="d1">Hello world. Hello world. Hello world. </div>
<div id="d2">
  Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing. Testing.
</div>

Upvotes: 3

user1726343
user1726343

Reputation:

Nest the divs, float them left and apply dimension styling for inner divs. Here is a demonstration: http://jsfiddle.net/njmWS/:

HTML:

<div>
    <div>
        <div>
            Hello
        </div>
        My name is abraham lincoln
    </div>
    And I hunt vampires
</div>

CSS:

div{
    float:left;
    background-color:gray;
    color:white;
    height:200px;
    width:300px;
}
div > div{
    background-color:blue;
    height:100px;
    width:50%;
}
div > div > div{
    background-color:red;
    height:50px;
    width:70%;
}

Upvotes: 2

Ronnie Goodrich
Ronnie Goodrich

Reputation: 41

CSS, right? Try layering your divs and see what you come up with. From your chart have div 2 instead be div 1 so that it is the larger space and the other div will thus fit within it.

Upvotes: 0

Related Questions