Title: CSS text wrap around
Last modified: August 19, 2016

---

# CSS text wrap around

 *  Resolved [kothea](https://wordpress.org/support/users/kothea/)
 * (@kothea)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/)
 * hi
    the vertical-align=”top” seems to only work for one line of text. which from
   what i have read is how it should work.
 * how do i have just one box with a top right large image and then variable length
   text that
 * a. wraps around the image as in printed media
    b. introduces ‘…more’ functionality
   half way through the text
 * that would really help. otherwise i’m going back to html and IE6!!!

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [krembo99](https://wordpress.org/support/users/krembo99/)
 * (@krembo99)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/#post-1195500)
 * add more divs .
    #div 1 (contains image and text) — #div 2 (contain image)
 *     ```
       #div 1 {
       width : wahtever% ; /**Bigger then image and #div2**/
       }
   
       #div 2 {
       float :left;
       }
       ```
   
 * That is it –
 * if you really want to over-do you can add
    { clear:none; }
 *  Thread Starter [kothea](https://wordpress.org/support/users/kothea/)
 * (@kothea)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/#post-1195528)
 * That’s what I thought but I can’t get it to work for the life of me. there needs
   to be multiple lines of wrapping text down the side of the image which then continues
   underneath the image.
 *     ```
       <div id="container">
       	<div id="content" >
       	 <div id="floatingimg"><img src="images/home.jpg"/>
       	 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et felis quis lacus suscipit placerat. Donec porttitor vehicula fermentum. etc etc...a lot of text.
       	 </div>
       	 </div>
       <div id="sidebar" >Menu</div>
       </div>
       ```
   
 *     ```
       #content {
       	min-width: 478px;
       	min-height:700px;
       	float: left;
       }
   
       	#content floatingimg {
       		width: 249px;
       		height: 369px;
       		float: left;
       		min-height:700px;
       		margin-right: 200px;
       	}
       ```
   
 *  Thread Starter [kothea](https://wordpress.org/support/users/kothea/)
 * (@kothea)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/#post-1195529)
 * i’ve tried with the <p> bits as well but can’t get it to work.
 *  [krembo99](https://wordpress.org/support/users/krembo99/)
 * (@krembo99)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/#post-1195609)
 * Float:left; is all you need .
 * in your code, the <p> element (inline) with the text is INSIDE the #floatingimg
   id
 * further more, you can not declare 2 ID´s and then this :
 *     ```
       #content floatingimg {
       		width: 249px;
       		height: 369px;
       		float: left;
       		min-height:700px;
       		margin-right: 200px;
       	}
       ```
   
 * either use commas, or in your case, you MUST seperate them.
    Alco , do not use
   ID , but classes, because i immagine you would want MORE then one image on a 
   page.
 * `#content .floatingimg`
 * see also [here](http://codex.wordpress.org/Wrapping_Text_Around_Images) and [here](http://www.tizag.com/cssT/float.php)
 *  Thread Starter [kothea](https://wordpress.org/support/users/kothea/)
 * (@kothea)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/#post-1195649)
 * Sorted, thank you very much

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘CSS text wrap around’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [vertical-align](https://wordpress.org/support/topic-tag/vertical-align/)

 * 5 replies
 * 2 participants
 * Last reply from: [kothea](https://wordpress.org/support/users/kothea/)
 * Last activity: [16 years, 9 months ago](https://wordpress.org/support/topic/css-text-wrap-around/#post-1195649)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics